/* Ninja Forms Custom Styling - AI Growth Suite Theme */ .elementor-kit-7 h1 { font-family: "roboto", Sans-serif!important; } /* ========================= NeuroSearch — Full CSS (corrected, readable) - Consistent pill search across devices - 30% transparent background (text/icons stay solid) - Works for both Elementor search (e-search-*) and custom (mm-search) ========================= */ /* Scope + box sizing */ #neurosearch, #neurosearch * { box-sizing: border-box; } /* --------------------------------- ELEMENTOR SEARCH: .e-search-* --------------------------------- */ /* Outer pill */ #neurosearch .e-search-form{ display:flex; align-items:center; gap:10px; width:100%; max-width:560px; /* adjust/remove as needed */ margin:0; padding:8px 12px; background: rgba(255,255,255,0.6); /* 30% transparent */ border:1px solid rgba(0,0,0,0.06); border-radius:9999px; /* pill */ box-shadow:0 8px 18px rgba(31,41,55,0.10); -webkit-backdrop-filter: saturate(120%) blur(2px); backdrop-filter: saturate(120%) blur(2px); } /* Prevent Elementor from stacking on small screens */ #neurosearch .e-search-form, #neurosearch .e-search-input-wrapper, #neurosearch .e-search-submit{ flex-wrap:nowrap; } /* Input wrapper (transparent, flexible) */ #neurosearch .e-search-input-wrapper{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; padding:0; background:transparent; border:0; } /* Search input (consistent size) */ #neurosearch .e-search-input{ flex:1 1 auto; min-height:44px; /* accessible touch target */ padding:0 10px; border:0; outline:none; background:transparent; font-size:16px; line-height:44px; /* nice caret/placeholder centering */ color:#2b2f3a; border-radius:9999px; -webkit-appearance:none; -moz-appearance:none; appearance:none; } #neurosearch .e-search-input::placeholder{ color:#8a90a5; } /* Hide the clear “X” Elementor may inject */ #neurosearch .e-fas-times{ display:none !important; } /* Circular submit button — fixed size */ #neurosearch .e-search-submit{ flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; background: rgba(91,99,131,0.6); /* 30% transparent */ color:#fff; display:flex; align-items:center; justify-content:center; line-height:0; margin-left:-6px; /* slight overlap into pill */ box-shadow:0 8px 18px rgba(91,99,131,0.24); cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease; } /* Ensure SVG icon stays crisp and centered */ #neurosearch .e-search-submit .e-font-icon-svg{ display:block; width:20px; height:20px; fill:#fff; } /* Hover/active micro-interactions */ #neurosearch .e-search-submit:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(91,99,131,0.30); } #neurosearch .e-search-submit:active{ transform:translateY(0); opacity:.92; } /* Keyboard focus (visible, accessible) */ #neurosearch .e-search-input:focus-visible, #neurosearch .e-search-submit:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(25,74,154,0.30); } /* Results container — let Elementor control visibility */ #neurosearch .e-search-results-container.hidden, #neurosearch .e-search-results-container.hide-loader{ display:none; } /* Optional: tighten label spacing */ #neurosearch .e-search-label{ margin:0; } /* Guard against odd responsive overrides */ @media (max-width: 9999px){ #neurosearch .e-search-form{ grid-auto-flow:unset; } #neurosearch .elementor-widget-container{ width:auto; } } /* --------------------------------- CUSTOM SEARCH: .mm-search --------------------------------- */ /* --------------------------------- CUSTOM SEARCH: .mm-search (final) --------------------------------- */ /* Visually-hidden labels (keep for screen readers) */ #neurosearch .mm-search__label{ position:absolute !important; width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } /* Pill container */ #neurosearch .mm-search{ display:flex;align-items:center;gap:10px; width:100%;max-width:680px;margin:0 auto; padding:8px 12px; background:rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.06); border-radius:9999px; box-shadow:0 8px 18px rgba(31,41,55,.12); -webkit-backdrop-filter:saturate(120%) blur(2px); backdrop-filter:saturate(120%) blur(2px); } /* Allow all items to shrink on small screens */ #neurosearch .mm-search__input, #neurosearch .mm-search__select, #neurosearch .mm-search__submit{ min-width:0; } /* Input (fills remaining space) */ #neurosearch .mm-search__input{ flex:1 1 auto;min-height:44px;padding:0 10px; border:0;outline:none;background:transparent; font-size:16px;line-height:44px;color:#2b2f3a;border-radius:9999px; } #neurosearch .mm-search__input::placeholder{color:#8a90a5;} /* Category dropdown (compact pill) */ #neurosearch .mm-search__select{ flex:0 1 190px; /* flexible basis (was fixed) */ max-width:45%; appearance:none;-webkit-appearance:none;-moz-appearance:none; background:rgba(244,246,250,.7); border:1px solid rgba(227,231,238,.7); border-radius:9999px; padding:10px 14px;font-size:14px;color:#2b2f3a;line-height:1.2; background-image:none !important; } #neurosearch .mm-search__select::before, #neurosearch .mm-search__select::after{content:none !important;} #neurosearch .mm-search__select::-ms-expand{display:none !important;} /* Circular submit button */ #neurosearch .mm-search__submit{ flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:50%; background:rgba(91,99,131,.7);color:#fff; display:flex;align-items:center;justify-content:center;line-height:0; margin-left:-6px;box-shadow:0 8px 18px rgba(91,99,131,.28); cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease; } #neurosearch .mm-search__submit svg{display:block;width:20px;height:20px;fill:#fff;} #neurosearch .mm-search__submit:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(91,99,131,.35);} #neurosearch .mm-search__submit:active{transform:translateY(0);opacity:.92;} /* Focus styles (keyboard) */ #neurosearch .mm-search__input:focus-visible, #neurosearch .mm-search__select:focus-visible, #neurosearch .mm-search__submit:focus-visible{ outline:none !important;box-shadow:0 0 0 0px rgba(25,74,154,.35);border-radius:200px; } /* ---------- Responsive ---------- */ /* Large tablets */ @media (max-width:1024px){ #neurosearch .mm-search{max-width:720px;gap:10px;padding:8px 12px;} #neurosearch .mm-search__select{flex-basis:180px;} } /* Tablets */ @media (max-width:768px){ #neurosearch .mm-search{ max-width:min(92vw,640px);gap:8px;padding:8px 10px; } #neurosearch .mm-search__input{min-height:42px;line-height:42px;font-size:15px;} #neurosearch .mm-search__select{ flex:0 1 42%;max-width:42%;padding:9px 12px;font-size:14px; } #neurosearch .mm-search__submit{width:42px;height:42px;} } /* Phones */ @media (max-width:480px){ #neurosearch .mm-search{ width:calc(100vw - 32px);max-width:none;gap:6px;padding:6px 8px; } #neurosearch .mm-search__input{min-height:40px;line-height:40px;font-size:15px;} #neurosearch .mm-search__select{ flex:0 1 40%;max-width:40%;padding:8px 10px;font-size:13.5px; } #neurosearch .mm-search__submit{width:40px;height:40px;} } /* Very small phones */ @media (max-width:360px){ #neurosearch .mm-search{width:calc(100vw - 24px);} #neurosearch .mm-search__select{flex:0 1 44%;max-width:44%;font-size:13px;} #neurosearch .mm-search__input{font-size:14.5px;} } /* Center the search box horizontally */ #neurosearch { display: flex; justify-content: center; width: 100%; margin: 0 auto; text-align: center; } /* ===== Posts grid — scoped to .catpost ===== */ .catpost { --dn-card-radius: 16px; --dn-shadow: 0 10px 24px rgba(7, 23, 55, .08); --dn-shadow-hover: 0 18px 34px rgba(7, 23, 55, .14); --dn-brand: #2F62AD; --dn-ink: #0F1D3A; --dn-ink-2: #4a5568; --dn-muted: #e7edf5; --dn-bg: #eaf0f7; padding: 28px 18px; background: var(--dn-bg); border-radius: 18px; } /* grid gaps */ .catpost .elementor-posts-container.elementor-grid { gap: 26px !important; } /* ===== Card ===== */ .catpost .elementor-post { display: flex; flex-direction: column; background: #fff; border-radius: var(--dn-card-radius); overflow: hidden; box-shadow: var(--dn-shadow); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; min-height: 100%; } /* Thumbnail */ .catpost .elementor-post__thumbnail { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .catpost .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder if no thumbnail */ .catpost .elementor-post:not(:has(.elementor-post__thumbnail))::before { content: ""; display: block; aspect-ratio: 16 / 10; background: linear-gradient(0deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.0) 100%), linear-gradient(135deg, #b8c9e5 0%, #8fb1e3 60%, #6ca0e2 100%); filter: saturate(.9) brightness(.95); } /* Content */ .catpost .elementor-post__text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; } /* Title */ .catpost .elementor-post__title { margin: 0; line-height: 1.25; } .catpost .elementor-post__title a { color: var(--dn-ink); text-decoration: none; font-weight: 700; font-size: clamp(16px, 1.8vw, 18px); } .catpost .elementor-post__title a:hover, .catpost .elementor-post__title a:focus-visible { color: var(--dn-brand); outline: none; } /* Meta */ .catpost .elementor-post__meta-data { display: flex; gap: 12px; align-items: center; color: #708197; font-size: 12px; } /* Excerpt (2 lines) */ .catpost .elementor-post__excerpt p { color: var(--dn-ink-2); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Read more pill */ .catpost .elementor-post__read-more { margin-top: 8px; align-self: flex-start; background: var(--dn-brand); color: #ffffff!important; text-decoration: none; font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 9px; transition: transform .2s ease, opacity .2s ease, background .2s ease; opacity: 0; transform: translateY(6px); } .catpost .elementor-post:hover .elementor-post__read-more, .catpost .elementor-post:focus-within .elementor-post__read-more { opacity: 1; transform: translateY(0); } .catpost .elementor-post__read-more:hover, .catpost .elementor-post__read-more:focus-visible { background: #174e9d; outline: none; } /* Hover polish */ .catpost .elementor-post:hover { transform: translateY(-6px); box-shadow: var(--dn-shadow-hover); filter: saturate(1.03); } /* Pagination */ .catpost .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 8px 6px 0; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--dn-ink); text-decoration: none; box-shadow: var(--dn-shadow); transition: background .2s ease, color .2s ease, transform .2s ease; } .catpost .elementor-pagination .page-numbers:hover { background: var(--dn-brand); color: #fff; transform: translateY(-2px); } .catpost .elementor-pagination .page-numbers.current { background: var(--dn-brand); color: #fff; } /* Responsive */ @media (max-width: 767px) { .catpost { padding: 18px 14px; } .catpost .elementor-post__text { padding: 14px 14px 16px; } } /* Global fade-up (apply by giving the element an ID that starts with "dn-fadeup") */ [id^="dn-fadeup"] { --dn-fadeup-distance: 40px; /* ↑ increase this for a bigger lift (was 18px) */ --dn-fadeup-duration: 0.9s; --dn-fadeup-ease: cubic-bezier(.2,.8,.2,1); opacity: 0; transform: translateY(var(--dn-fadeup-distance)); transition: opacity var(--dn-fadeup-duration) var(--dn-fadeup-ease), transform var(--dn-fadeup-duration) var(--dn-fadeup-ease); will-change: opacity, transform; } /* Revealed state */ [id^="dn-fadeup"].dn-inview { opacity: 1; transform: translateY(0); } /* Reveal on keyboard focus too (accessibility) */ [id^="dn-fadeup"]:focus, [id^="dn-fadeup"]:focus-within { opacity: 1; transform: translateY(0); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { [id^="dn-fadeup"] { transition: none !important; transform: none !important; opacity: 1 !important; } } .dn-related-thumb{ display: none; } /* Scope to this section only */ #servivelist.dn-animate .iconwrap { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--dn-delay, 0s); /* per-item stagger from JS */ will-change: opacity, transform; } /* Revealed state */ #servivelist.dn-animate .iconwrap.dn-inview { opacity: 1; transform: translateY(0); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #servivelist.dn-animate .iconwrap { transition: none !important; transform: none !important; opacity: 1 !important; } } /* Gate class is added by JS so nothing is hidden before JS is ready */ opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } /* Cards (the 4 agent panels) */ .dn-anim-scope .agent1main { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--dn-delay, 0s); /* set in JS for stagger */ will-change: opacity, transform; } /* Revealed state */ .dn-anim-scope .dn-inview { opacity: 1; transform: translateY(0); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .dn-anim-scope [data-id="d118848"] .elementor-heading-title, .dn-anim-scope [data-id="fcc8ab8"] .elementor-heading-title, .dn-anim-scope .agent1main { transition: none !important; transform: none !important; opacity: 1 !important; } } /* Make sure we're styling the right widget */ #sidelist .dnpt__list--lvl1 { list-style: none; margin: 0; padding: 0; text-transform: uppercase; } /* LEVEL 1: border line between parents */ #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1 { border-top: 1px solid #e5e5e5; } #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1:first-child { border-top: none; } /* LEVEL 1 ROW (link + toggle in the header row) */ #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1 > .dnpt__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; } /* Alternating backgrounds for LEVEL 1 rows */ #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1:nth-of-type(odd) > .dnpt__header { background-color: #ffffff !important; } #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1:nth-of-type(even) > .dnpt__header { background-color: #f8f8f9 !important; } /* LEVEL 1 link */ #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1 > .dnpt__header > .dnpt__link { flex: 1; color: #1a1a1a; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: 1px; } #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1 > .dnpt__header > .dnpt__link:hover { color: #0073e6; } /* LEVEL 1 toggle */ #sidelist .dnpt__list--lvl1 > .dnpt__item--lvl1 > .dnpt__header > .dnpt__toggle { margin-left: 1rem; width: 2rem; height: 2rem; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #sidelist .dnpt__pm { font-size: 18px; line-height: 1; color: #1a1a1a; } /* LEVEL 2 (you said this is fine already; included for completeness) */ #sidelist .dnpt__panel { width:100%; overflow:hidden; transition:height .25s ease; } #sidelist .dnpt__list--lvl2 { list-style:none; margin:0; padding:0; } #sidelist .dnpt__item--lvl2 { border-top:1px solid #e5e5e5; padding:10px 15px 10px 30px; } #sidelist .dnpt__item--lvl2:nth-child(odd) { background:#ffffff; } #sidelist .dnpt__item--lvl2:nth-child(even){ background:#f8f8f9; } #sidelist .dnpt__item--lvl2 > .dnpt__link { color:#1a1a1a; text-decoration:none; font-weight:500; font-size:15px; display:block; letter-spacing:1px; } #sidelist .dnpt__item--lvl2 > .dnpt__link:hover { color:#0073e6; } /* Current highlight (both levels) */ #sidelist .dnpt__item--lvl1.current_page_item > .dnpt__header > .dnpt__link, #sidelist .dnpt__item--lvl2.current_page_item > .dnpt__link { color:#0073e6; font-weight:600; } .dn-breadcrumbs { font-size: 14px; margin: 1em 0; color: #555; } .dn-breadcrumbs a { color: #194A9A; text-decoration: none; } .dn-breadcrumbs a:hover { text-decoration: underline; } .dn-breadcrumbs span { color: #333; font-weight: 500; } /* ========================================== OLD: Child page list (matches the styling) ========================================== */ /* Remove list bullets */ #sidelist .dn-related-list { list-style: none; text-transform: uppercase; margin: 0; padding: 0; border: 0px solid #e5e5e5; border-top: none; } /* Each item row */ #sidelist .dn-related-item { border-top: 1px solid #e5e5e5; padding: 10px 15px; } /* Alternate row backgrounds */ #sidelist .dn-related-item:nth-child(odd) { background-color: #ffffff; /* white */ } #sidelist .dn-related-item:nth-child(even) { background-color: #f8f8f9; /* light gray */ } /* Title styling */ #sidelist .dn-related-title { color: #1a1a1a; /* dark text */ text-decoration: none; font-weight: 500; font-size: 15px; display: block; } /* Hover effect */ #sidelist .dn-related-title:hover { color: #0073e6; /* hover blue */ } /* ========================================== NEW: Child page list (matches the styling) ========================================== */ #sidelist .child-page-list { list-style: none; margin: 0; padding: 0; border: 0px solid #e5e5e5; border-top: none; text-transform: uppercase; } #sidelist .child-page-list li { border-top: 1px solid #e5e5e5; padding: 10px 15px; } #sidelist .child-page-list li:nth-child(odd) { background-color: #ffffff; } #sidelist .child-page-list li:nth-child(even){ background-color: #f8f8f9; } #sidelist .child-page-list li a { color: #1a1a1a; text-decoration: none; font-weight: 500; font-size: 15px; display: block; letter-spacing:1px } #sidelist .child-page-list li a:hover { color: #0073e6; } #sidelist .child-page-list li.current_page_item > a { color: #0073e6; font-weight: 600; } #mainslider .swiper-slide .laf1{ border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.35); overflow:hidden; will-change:transform,opacity,filter; } /* CSS */ /* Container look (EZ-TOC style) */ /* CSS */ /* Container look (like EZ-TOC) */ #dn-toc.ezlike { background: #f9f9f9; border: 1px solid #aaa; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); padding: 10px; margin-bottom: 1em; } /* Header row */ #dn-toc .dn-toc-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } #dn-toc h2 { margin: 0; font-size: 14px; line-height: 1.45; } /* Button */ #dn-toc .dn-toc-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: 6px 12px; font-size: 14px; background: #fff; color: #333; border: 1px solid #999191; border-radius: 5px; cursor: pointer; } #dn-toc .dn-toc-toggle:hover { background: #e0e0e0; } #dn-toc .dn-toc-icon { transition: transform .25s ease; } /* Panel animates height */ #dn-toc .dn-toc-panel { overflow: hidden; height:auto!important; /* start collapsed-safe; JS will set actual height */ transition: height .28s ease; will-change: height; } /* List styles */ #dn-toc .dn-toc-list { list-style: none; margin: 12px 0 0; padding: 0 10px; } #dn-toc .dn-toc-list li { line-height: 1.6; } #dn-toc .dn-toc-list a { color: #444; text-decoration: none; display: inline-flex; padding-left: 10px; } #dn-toc .dn-toc-list a:hover { text-decoration: underline; } /* Visual states */ #dn-toc.is-collapsed .dn-toc-icon { transform: rotate(-90deg); } @media (prefers-reduced-motion: reduce) { #dn-toc .dn-toc-panel { transition: none; } } /* Default (expanded) takes full width */ #dn-toc { width: 100%; transition: width .3s ease; /* smooth resize */ margin-left: auto; margin-top: 10px; } /* Collapsed state: narrower box */ #dn-toc.is-collapsed { width: 250px; /* adjust as needed */ } .toc-container.ezlike.is-collapsed #dn-toc-panel { height: 0 !important; overflow: hidden; } .toc-container.ezlike:not(.is-collapsed) #dn-toc-panel { height: auto; } /* ========================================== NEW: page layout styles ========================================== */ .contact-form-section { max-width: 800px; margin: 0 auto; padding: 3rem 2rem; background: var(--white); } .contact-form-section h2 { font-size: 2.5rem; color: var(--dark); text-align: center; margin-bottom: 2rem; font-weight: 700; } .nf-form-cont { background: transparent; } .nf-form-wrap { max-width: 100%; } .nf-form-fields-required { text-align: center; margin-bottom: 2rem; color: var(--gray); font-size: 0.9rem; } .ninja-forms-req-symbol { color: var(--accent); font-weight: bold; } .nf-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; } .nf-cell[style*="50%"] { flex: 1; min-width: calc(50% - 0.75rem); } .nf-cell[style*="100%"] { flex: 1 1 100%; } .nf-field-container { margin-bottom: 0; } .nf-field-label label { display: block; color: var(--gray); font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; } .ninja-forms-field, .nf-element { width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: var(--border-radius-md); font-size: 1rem; color: var(--dark); background: var(--white); transition: var(--transition); box-sizing: border-box; } .ninja-forms-field:focus, .nf-element:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25, 74, 154, 0.1); } input.ninja-forms-field, input.nf-element { height: 48px; } select.ninja-forms-field, select.nf-element { height: 48px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5rem; padding-right: 2.5rem; appearance: none; } textarea.ninja-forms-field, textarea.nf-element { min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.5; } textarea.ninja-forms-field::placeholder, textarea.nf-element::placeholder { color: #9ca3af; } .submit-container { margin-top: 1rem; } input[type="submit"].ninja-forms-field, input[type="submit"].nf-element { background: linear-gradient(135deg, #194A9A, #2F62AD); color: var(--white); border: none; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: var(--transition); width: auto; min-width: 200px; height: auto; box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2); } input[type="submit"].ninja-forms-field:hover, input[type="submit"].nf-element:hover { background: linear-gradient(135deg, #5855eb, #7c3aed); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3); } .nf-error { color: var(--accent); font-size: 0.875rem; margin-top: 0.5rem; } .nf-form-hp { display: none !important; } .nf-form-fields-required{ visibility:hidden; height:0; } @media (max-width: 768px) { .contact-form-section { padding: 2rem 1rem; } .contact-form-section h2 { font-size: 2rem; } .nf-row { flex-direction: column; gap: 0; } .nf-cell[style*="50%"] { flex: 1 1 100%; min-width: 100%; margin-bottom: 1.5rem; } input[type="submit"].ninja-forms-field, input[type="submit"].nf-element { width: 100%; min-width: auto; } } @media (max-width: 480px) { .contact-form-section { padding: 1.5rem 0.75rem; } .contact-form-section h2 { font-size: 1.75rem; } .ninja-forms-field, .nf-element { padding: 0.75rem; font-size: 0.95rem; } input.ninja-forms-field, input.nf-element, select.ninja-forms-field, select.nf-element { height: 44px; } } /* ========================================== NEW: page layout styles ========================================== */ /* Add this import at the very top of your CSS file */ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #194A9A; --secondary: #2F62AD; --text-blue: #348EDF; --accent: #DF4756; --dark: #011F4E; --white: #ffffff; --light-gray: #f8fafc; --gray: #64748b; --border: #e2e8f0; --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.05); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); --shadow-xl: 0 10px 30px rgba(0,0,0,0.3); --border-radius-sm: 6px; --border-radius-md: 8px; --border-radius-lg: 12px; --transition: all 0.3s ease; } .UDA-container h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif!important; } /* Add font-family to body and all elements */ body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; color: var(--dark); } /* Ensure all elements inherit Roboto */ * { font-family: inherit; } /* Rest of your existing CSS remains exactly the same... */ .UDA-container { max-width: 1200px; margin: 0 auto; padding: 0 00px; } .UDA-section-padding { padding: 4rem 0; } .UDA-section-padding-sm { padding: 2rem 0; } .UDA-section-title { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: var(--dark); font-weight: 700; } .UDA-text-center { text-align: center; } .UDA-text-left { text-align: left; } .UDA-text-white { color: var(--white); } .UDA-bg-primary { background: var(--primary); } .UDA-bg-secondary { background: var(--secondary); } .UDA-bg-dark { background: var(--dark); } .UDA-bg-light { background: var(--light-gray); } .UDA-bg-white { background: var(--white); } .UDA-bg-gradient-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); } .UDA-bg-gradient-dark { background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%); } .UDA-bg-gradient-accent { background: linear-gradient(90deg, var(--accent) 0%, #e24556 100%); } .UDA-grid { display: grid; gap: 2rem; } .UDA-grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .UDA-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .UDA-grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .UDA-grid-1 { grid-template-columns: 1fr; } .UDA-grid-2 { grid-template-columns: repeat(2, 1fr); } .UDA-grid-3 { grid-template-columns: repeat(3, 1fr); } .UDA-grid-4 { grid-template-columns: repeat(4, 1fr); } .UDA-flex { display: flex; } .UDA-flex-center { display: flex; align-items: center; justify-content: center; } .UDA-flex-between { display: flex; align-items: center; justify-content: space-between; } .UDA-flex-wrap { flex-wrap: wrap; } .UDA-flex-col { flex-direction: column; } .UDA-gap-1 { gap: 1rem; } .UDA-gap-2 { gap: 2rem; } .UDA-gap-3 { gap: 3rem; } .UDA-btn { padding: 1rem 2rem; border-radius: var(--border-radius-md); text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: var(--transition); display: inline-block; border: none; cursor: pointer; text-align: center; } .UDA-btn-primary { background: var(--white); color: var(--primary); } .UDA-btn-primary:hover { background: var(--light-gray); transform: translateY(-2px); } .UDA-btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); } .UDA-btn-secondary:hover { background: var(--white); color: var(--primary); } .UDA-btn-accent { background: var(--accent); color: var(--white); } .UDA-btn-accent:hover { background: #c73e4c; } .UDA-btn-full { width: 100%; } .UDA-card { background: var(--white); border-radius: var(--border-radius-lg); padding: 2rem; box-shadow: var(--shadow-md); transition: var(--transition); } .UDA-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .UDA-card-sm { padding: 1.5rem; } .UDA-card-lg { padding: 2.5rem; } .UDA-card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; } .UDA-card-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--dark); font-weight: 600; } .UDA-card-description { color: var(--gray); margin-bottom: 1.5rem; } .UDA-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); padding: 80px 0; position: relative; overflow: hidden; } .UDA-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .UDA-hero-content { position: relative; z-index: 1; text-align: center; } .UDA-hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.1; } .UDA-hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; opacity: 0.95; max-width: 800px; margin-left: auto; margin-right: auto; } .UDA-hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .UDA-hero-badge { font-size: 1rem; opacity: 0.9; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .UDA-stats-bar { background: var(--dark); color: var(--white); padding: 2rem 0; } .UDA-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; } .UDA-stat-item { padding: 1rem; } .UDA-stat-number { font-size: 2.5rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; } .UDA-stat-label { font-size: 0.9rem; opacity: 0.9; } .UDA-alert-banner { background: linear-gradient(90deg, var(--accent) 0%, #e24556 100%); color: var(--white); padding: 1 rem 0; margin: 2rem 0; } .UDA-alert-content { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .UDA-alert-icon { font-size: 2rem; flex-shrink: 0; } .UDA-alert-text { flex: 1; min-width: 300px; } .UDA-alert-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color:white!important; } .UDA-alert-description { opacity: 0.95; color:white!important; font-size: 0.95rem; } .UDA-alert-btn { background:white!important; color:black!important; padding: 0.75rem 1.5rem; border-radius: var(--border-radius-sm); text-decoration: none; font-weight: 600; white-space: nowrap; } .UDA-list-unstyled { list-style: none; } .UDA-list-check { list-style: none; } .UDA-list-check li { color: var(--gray); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; } .UDA-list-check li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; } .UDA-strategy-card { background: var(--white); padding: 2rem; border-radius: var(--border-radius-md); border-left: 4px solid var(--primary); box-shadow: var(--shadow-sm); } .UDA-strategy-title { color: var(--primary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .UDA-success-number { font-size: 3rem; font-weight: 700; color: var(--accent); margin-bottom: 1rem; } .UDA-success-strategy { background: #fef7cd; padding: 1rem; border-radius: var(--border-radius-md); font-size: 0.9rem; } .UDA-success-strategy strong { color: #92400e; } .UDA-success-strategy p { margin: 0.5rem 0 0 0; color: #78350f; } .UDA-faq-container { max-width:auto; margin: 0 auto; } .UDA-faq-item { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .UDA-faq-question { font-size: 1.25rem; color: var(--dark); margin-bottom: 1rem; font-weight: 600; } .UDA-faq-answer { color: var(--gray); } .UDA-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto; padding:15px; } .UDA-pricing-card { background: var(--white); color: var(--dark); border-radius: var(--border-radius-lg); padding: 2rem; text-align: center; position: relative; } .UDA-pricing-card.UDA-featured { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); transform: scale(1.05); box-shadow: var(--shadow-xl); } .UDA-pricing-badge { background: var(--accent); color: var(--white); padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; } .UDA-pricing-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary); } .UDA-pricing-card.UDA-featured .UDA-pricing-title { color: var(--white); } .UDA-pricing-amount { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; } .UDA-pricing-amount span { font-size: 1rem; font-weight: normal; } .UDA-pricing-features { list-style: none; text-align: left; margin-bottom: 2rem; } .UDA-pricing-features li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; } .UDA-pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; } .UDA-pricing-card.UDA-featured .UDA-pricing-features li::before { color: var(--white); } .UDA-pricing-footer { padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .UDA-pricing-card.UDA-featured .UDA-pricing-footer { border-color: rgba(255,255,255,0.3); } .UDA-cta { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); padding: 4rem 0; text-align: center; } .UDA-cta-title { font-size: 2.5rem; margin-bottom: 1.5rem; font-weight: 700; } .UDA-cta-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .UDA-cta-form { background: var(--white); color: var(--dark); padding: 2rem; border-radius: var(--border-radius-lg); max-width: 500px; margin: 0 auto 2rem auto; } .UDA-cta-form h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--dark); } .UDA-form-group { margin-bottom: 1rem; } .UDA-form-control { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--border-radius-sm); font-size: 1rem; transition: var(--transition); } .UDA-form-control:focus { outline: none; border-color: var(--primary); } .UDA-btn-cta { width: 100%; background: var(--primary); color: var(--white); padding: 1rem; border: none; border-radius: var(--border-radius-sm); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .UDA-btn-cta:hover { background: var(--secondary); } .UDA-form-note { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; } .UDA-cta-contact { margin-top: 2rem; } .UDA-cta-phone { font-size: 2rem; color: var(--white); text-decoration: none; font-weight: 700; } .UDA-mb-1 { margin-bottom: 1rem; } .UDA-mb-2 { margin-bottom: 2rem; } .UDA-mb-3 { margin-bottom: 3rem; } .UDA-mt-1 { margin-top: 1rem; } .UDA-mt-2 { margin-top: 2rem; } .UDA-mt-3 { margin-top: 3rem; } .UDA-p-1 { padding: 1rem; } .UDA-p-2 { padding: 2rem; } .UDA-p-3 { padding: 3rem; } .UDA-opacity-90 { opacity: 0.9; } .UDA-opacity-95 { opacity: 0.95; } .UDA-font-weight-bold { font-weight: 700; } .UDA-font-weight-semibold { font-weight: 600; } .UDA-font-size-sm { font-size: 0.9rem; } .UDA-font-size-lg { font-size: 1.25rem; } .UDA-font-size-xl { font-size: 1.5rem; } .UDA-color-primary { color: var(--primary); } .UDA-color-accent { color: var(--accent); } .UDA-color-gray { color: var(--gray); } .UDA-color-dark { color: var(--dark); } @media (max-width: 768px) { .UDA-container { padding: 0 10px; } .UDA-hero { padding: 60px 0; } .UDA-hero-title { font-size: 2.5rem; } .UDA-hero-subtitle { font-size: 1.25rem; } .UDA-hero-buttons { flex-direction: column; align-items: center; } .UDA-btn { width: 100%; max-width: 300px; } .UDA-section-title { font-size: 2rem; } .UDA-grid-auto, .UDA-grid-auto-lg { grid-template-columns: 1fr; } .UDA-grid-2, .UDA-grid-3, .UDA-grid-4 { grid-template-columns: 1fr; } .UDA-pricing-card.UDA-featured { transform: none; order: -1; } .UDA-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .UDA-alert-content { flex-direction: column; text-align: center; } .UDA-alert-text { min-width: auto; } .UDA-cta-title { font-size: 2rem; } .UDA-cta-phone { font-size: 1.5rem; } } @media (max-width: 480px) { .UDA-hero-title { font-size: 2rem; } .UDA-hero-subtitle { font-size: 1.1rem; } .UDA-section-title { font-size: 1.75rem; } .UDA-stat-number { font-size: 2rem; } .UDA-card { padding: 1.5rem; } .UDA-stats-grid { grid-template-columns: 1fr; } .UDA-cta-form { padding: 1.5rem; margin: 0 10px 2rem 10px; } } .UDA-hero-family { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); padding: 80px 0; position: relative; overflow: hidden; } .UDA-hero-family::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(''); opacity: 0.3; } .UDA-card-icon-family { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--text-blue)); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; } .UDA-strategy-title-family { color: var(--primary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .UDA-success-number-family { font-size: 3rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; } .UDA-pricing-card-family.UDA-featured { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); transform: scale(1.05); box-shadow: var(--shadow-xl); } .UDA-pricing-title-family { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary); } .UDA-pricing-card-family.UDA-featured .UDA-pricing-title-family { color: var(--white); } .UDA-cta-family { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); padding: 4rem 0; text-align: center; } .UDA-btn-family { background: var(--primary); color: var(--white); padding: 1rem 2rem; border: none; border-radius: var(--border-radius-md); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; } .UDA-btn-family:hover { background: var(--text-blue); transform: translateY(-2px); } .UDA-form-note-family { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .UDA-hero-criminal { background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%); color: var(--white); padding: 80px 0; position: relative; overflow: hidden; } .UDA-hero-criminal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(''); opacity: 0.3; } .UDA-stats-bar-criminal { background: var(--accent); color: var(--white); padding: 2rem 0; } .UDA-alert-banner-criminal { background: linear-gradient(90deg, var(--accent) 0%, #e24556 100%); color: var(--white); padding: 1.5rem 0; margin: 2rem 0; } .UDA-card-icon-criminal { width: 60px; height: 60px; background: linear-gradient(135deg, var(--dark), var(--primary)); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; } .UDA-strategy-title-criminal { color: var(--dark); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .UDA-success-number-criminal { font-size: 3rem; font-weight: 700; color: var(--dark); margin-bottom: 1rem; } .UDA-pricing-card-criminal { background: var(--white); color: var(--dark); border-radius: var(--border-radius-lg); padding: 2rem; text-align: center; position: relative; } .UDA-pricing-card-criminal.UDA-featured { background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%); color: var(--white); transform: scale(1.05); box-shadow: var(--shadow-xl); } .UDA-pricing-title-criminal { font-size: 1.5rem; margin-bottom: 1rem; color: var(--dark); } .UDA-pricing-card-criminal.UDA-featured .UDA-pricing-title-criminal { color: var(--white); } .UDA-pricing-badge-criminal { background: var(--accent); color: var(--white); padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; } .UDA-cta-criminal { background: linear-gradient(135deg, var(--accent) 0%, #e24556 100%); color: var(--white); padding: 4rem 0; text-align: center; } .UDA-cta-title-criminal { font-size: 2.5rem; margin-bottom: 1.5rem; font-weight: 700; } .UDA-cta-subtitle-criminal { font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; } .UDA-cta-description-criminal { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .UDA-btn-criminal { background: var(--accent); color: var(--white); padding: 1rem 2rem; border: none; border-radius: var(--border-radius-md); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; width: 100%; } .UDA-btn-criminal:hover { background: #c73e4c; transform: translateY(-2px); } .UDA-form-note-criminal { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .UDA-hero-employment { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); padding: 80px 0; position: relative; overflow: hidden; } .UDA-hero-employment::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(''); opacity: 0.3; } .UDA-card-icon-employment { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; } .UDA-strategy-title-employment { color: var(--primary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .UDA-success-number-employment { font-size: 3rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; } .UDA-pricing-card-employment { background: var(--white); color: var(--dark); border-radius: var(--border-radius-lg); padding: 2rem; text-align: center; position: relative; } .UDA-pricing-card-employment.UDA-featured { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); transform: scale(1.05); box-shadow: var(--shadow-xl); } .UDA-pricing-title-employment { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary); } .UDA-pricing-card-employment.UDA-featured .UDA-pricing-title-employment { color: var(--white); } .UDA-pricing-badge-employment { background: #fbbf24; color: var(--dark); padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; } .UDA-cta-employment { background: linear-gradient(135deg, var(--primary) 0%, var(--text-blue) 100%); color: var(--white); padding: 4rem 0; text-align: center; } .UDA-btn-employment { background: var(--primary); color: var(--white); padding: 1rem 2rem; border: none; border-radius: var(--border-radius-md); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; width: 100%; } .UDA-btn-employment:hover { background: var(--secondary); transform: translateY(-2px); } .UDA-form-note-employment { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .UDA-hero-estate { background: linear-gradient(135deg, var(--secondary) 0%, var(--text-blue) 100%); color: var(--white); padding: 80px 0; position: relative; overflow: hidden; } .UDA-hero-estate::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(''); opacity: 0.3; } .UDA-card-icon-estate { width: 60px; height: 60px; background: linear-gradient(135deg, var(--secondary), var(--text-blue)); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; } .UDA-strategy-title-estate { color: var(--secondary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .UDA-success-number-estate { font-size: 3rem; font-weight: 700; color: var(--secondary); margin-bottom: 1rem; } .UDA-pricing-card-estate { background: var(--white); color: var(--dark); border-radius: var(--border-radius-lg); padding: 2rem; text-align: center; position: relative; } .UDA-pricing-card-estate.UDA-featured { background: linear-gradient(135deg, var(--secondary) 0%, var(--text-blue) 100%); color: var(--white); transform: scale(1.05); box-shadow: var(--shadow-xl); } .UDA-pricing-title-estate { font-size: 1.5rem; margin-bottom: 1rem; color: var(--secondary); } .UDA-pricing-card-estate.UDA-featured .UDA-pricing-title-estate { color: var(--white); } .UDA-pricing-badge-estate { background: #fbbf24; color: var(--dark); padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; } .UDA-cta-estate { background: linear-gradient(135deg, var(--secondary) 0%, var(--text-blue) 100%); color: var(--white); padding: 4rem 0; text-align: center; } .UDA-btn-estate { background: var(--secondary); color: var(--white); padding: 1rem 2rem; border: none; border-radius: var(--border-radius-md); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; width: 100%; } .UDA-btn-estate:hover { background: var(--text-blue); transform: translateY(-2px); } .UDA-form-note-estate { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Additional CSS to add to your main stylesheet */ /* Enhanced Mobile Responsiveness for all Law Practice Pages */ /* Improved Mobile Navigation and Buttons */ @media (max-width: 768px) { .UDA-hero-buttons { flex-direction: column; align-items: center; gap: 1rem; } .UDA-hero-buttons .UDA-btn { width: 100%; max-width: 300px; text-align: center; } /* Enhanced Stats Grid for Mobile */ .UDA-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* Alert Banner Mobile Optimization */ .UDA-alert-content { flex-direction: column; text-align: center; gap: 1rem; } .UDA-alert-text { min-width: auto; text-align: center; } .UDA-alert-btn { align-self: center; white-space: nowrap; } /* Card Grid Mobile Improvements */ .UDA-grid-auto, .UDA-grid-auto-lg, .UDA-grid-2, .UDA-grid-3, .UDA-grid-4 { grid-template-columns: 1fr; gap: 1.5rem; } /* Pricing Cards Mobile */ .UDA-pricing-card.UDA-featured { transform: none; order: -1; margin-bottom: 1rem; } /* CTA Form Mobile */ .UDA-cta-form { margin: 0 15px 2rem 15px; padding: 1.5rem; } /* Success Numbers Mobile */ .UDA-success-number { font-size: 2.5rem; } } @media (max-width: 480px) { /* Container Padding for Small Screens */ .UDA-container { padding: 0 10px; } /* Hero Section Mobile */ .UDA-hero { padding: 40px 0; } .UDA-hero-title { font-size: 2rem; line-height: 1.2; } .UDA-hero-subtitle { font-size: 1.1rem; line-height: 1.4; } /* Section Titles Mobile */ .UDA-section-title { font-size: 1.75rem; line-height: 1.3; } /* Card Improvements */ .UDA-card { padding: 1.5rem; } .UDA-card-title { font-size: 1.25rem; } .UDA-strategy-card { padding: 1.5rem; } /* Stats Single Column */ .UDA-stats-grid { grid-template-columns: 1fr; gap: 1rem; } .UDA-stat-item { padding: 0.75rem; } .UDA-stat-number { font-size: 2rem; } /* Form Improvements */ .UDA-cta-form { padding: 1.5rem; margin: 0 10px 2rem 10px; } .UDA-form-control { padding: 0.75rem; font-size: 1rem; } /* Success Numbers */ .UDA-success-number { font-size: 2rem; } /* Pricing Amount */ .UDA-pricing-amount { font-size: 2rem; } /* CTA Mobile */ .UDA-cta-title { font-size: 2rem; } .UDA-cta-subtitle { font-size: 1.1rem; } .UDA-cta-phone { font-size: 1.5rem; } } /* Extra Small Devices (360px and below) */ @media (max-width: 360px) { .UDA-container { padding: 0 5px; } /* Hero Ultra Small */ .UDA-hero { padding: 30px 0; } .UDA-hero-title { font-size: 1.75rem; line-height: 1.2; } .UDA-hero-subtitle { font-size: 1rem; line-height: 1.3; } /* Buttons Ultra Small */ .UDA-btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; } .UDA-btn-cta { padding: 0.875rem; font-size: 1rem; } /* Sections Ultra Small */ .UDA-section-title { font-size: 1.5rem; } .UDA-card-title { font-size: 1.1rem; } /* Form Ultra Small */ .UDA-cta-form { padding: 1rem; margin: 0 5px 1.5rem 5px; } .UDA-form-control { padding: 0.625rem; font-size: 0.9rem; } /* Numbers Ultra Small */ .UDA-success-number { font-size: 1.75rem; } .UDA-stat-number { font-size: 1.75rem; } .UDA-pricing-amount { font-size: 1.75rem; } /* CTA Ultra Small */ .UDA-cta-title { font-size: 1.75rem; } .UDA-cta-subtitle { font-size: 1rem; } .UDA-cta-phone { font-size: 1.25rem; } } /* Touch Device Optimizations */ @media (pointer: coarse) { .UDA-btn, .UDA-btn-cta, .UDA-btn-primary, .UDA-btn-secondary, .UDA-btn-accent { min-height: 44px; padding: 0.875rem 1.5rem; } .UDA-form-control { min-height: 44px; padding: 0.75rem; } .UDA-alert-btn { min-height: 44px; padding: 0.75rem 1.5rem; } } /* Landscape Phone Optimizations */ @media (max-width: 896px) and (orientation: landscape) { .UDA-hero { padding: 30px 0; } .UDA-hero-title { font-size: 2rem; } .UDA-hero-subtitle { font-size: 1.1rem; } .UDA-section-padding { padding: 2rem 0; } } /* Print Styles for Law Pages */ @media print { .UDA-hero, .UDA-cta, .UDA-alert-banner, .UDA-stats-bar { background: white !important; color: black !important; } .UDA-btn, .UDA-btn-cta, .UDA-alert-btn { border: 1px solid black; background: white !important; color: black !important; } .UDA-card, .UDA-strategy-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .UDA-hero-buttons, .UDA-cta-form { display: none; } } /* Accessibility Improvements */ @media (prefers-reduced-motion: reduce) { .UDA-card:hover, .UDA-btn:hover, .UDA-pricing-card.UDA-featured { transform: none; } * { transition: none !important; animation: none !important; } } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .UDA-card, .UDA-strategy-card, .UDA-pricing-card { border: 2px solid var(--dark); } .UDA-btn, .UDA-btn-cta, .UDA-alert-btn { border: 2px solid currentColor; } } /* Focus Indicators for Accessibility */ .UDA-btn:focus, .UDA-btn-cta:focus, .UDA-form-control:focus, .UDA-alert-btn:focus { outline: 3px solid var(--text-blue); outline-offset: 2px; } /* Improved Spacing for Better Mobile Experience */ .UDA-section-padding { padding: 3rem 0; } @media (max-width: 768px) { .UDA-section-padding { padding: 2rem 0; } } @media (max-width: 480px) { .UDA-section-padding { padding: 1.5rem 0; } } .UDA-success-strategy { background: var(--light-gray); padding: 1rem; border-radius: var(--border-radius-md); font-size: 0.9rem; border-left: 4px solid var(--text-blue); } .UDA-success-strategy strong { color: var(--dark); } .UDA-success-strategy p { margin: 0.5rem 0 0 0; color: var(--dark); } /* Mobile table improvements */ @media (max-width: 768px) { table { font-size: 12px; } th, td { padding: 8px 4px; } } .dn-btn-transparent { background: rgba(255,255,255,0.2); color: var(--white); border: 2px solid rgba(255,255,255,0.3); } .dn-btn-transparent:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.5); } .dn-alert-overlap { margin-top: -40px; position: relative; z-index: 10; } .dn-target-icon::before { content: "🎯"; font-size: 2rem; } .dn-service-description { margin-top: 2rem; } .dn-intro-text { font-size: 1.125rem; line-height: 1.8; color: var(--gray); } .dn-intro-text:not(:last-child) { margin-bottom: 1rem; } .dn-icon-research { background: linear-gradient(135deg, #3b82f6, #2563eb); } .dn-icon-content { background: linear-gradient(135deg, #10b981, #059669); } .dn-icon-local { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .dn-icon-ai { background: linear-gradient(135deg, #f59e0b, #d97706); } .dn-icon-schema { background: linear-gradient(135deg, #ec4899, #db2777); } .dn-icon-authority { background: linear-gradient(135deg, #14b8a6, #0d9488); } .dn-feature-title { font-weight: 700; margin-bottom: 1rem; color: var(--dark); } .dn-feature-description { font-size: 0.9rem; color: var(--gray); } .dn-deliverable-title { font-weight: 700; margin-bottom: 1rem; color: var(--dark); } .dn-deliverable-list { color: var(--gray); line-height: 1.8; list-style: none; padding: 0; } .dn-deliverable-list li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; } .dn-deliverable-list li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; } .dn-strategy-highlight { background: linear-gradient(135deg, #fef3c7, #fde68a); padding: 2rem; border-radius: var(--border-radius-lg); border-left: 4px solid var(--text-blue); } .dn-strategy-title { color: #92400e; font-size: 1.5rem; margin-bottom: 1rem; font-weight: 700; } .dn-strategy-text { color: #78350f; line-height: 1.8; margin: 0; } .dn-market-reality { max-width: 600px; margin: 2rem auto; background: rgba(255,255,255,0.1); padding: 1rem; border-radius: var(--border-radius-md); border-left: 4px solid var(--white); } .dn-reality-text { color: var(--white); font-size: 1rem; margin: 0; } .dn-btn-cta-primary { background: var(--white); color: var(--text-blue); padding: 1rem 2rem; font-size: 1.125rem; } .dn-btn-cta-primary:hover { background: var(--light-gray); transform: translateY(-2px); } .dn-btn-cta-secondary { background: rgba(255,255,255,0.2); color: var(--white); padding: 1rem 2rem; font-size: 1.125rem; border: 2px solid rgba(255,255,255,0.3); } .dn-btn-cta-secondary:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.5); } .dn-intelligence-card { background: var(--light-gray); padding: 1rem; border-radius: var(--border-radius-md); border-left: 4px solid var(--text-blue); } .dn-intelligence-title { color: var(--dark); font-weight: 700; margin-bottom: 0.5rem; } .dn-intelligence-text { margin: 0.5rem 0 0 0; color: var(--dark); line-height: 1.6; } .intercore-contact-wrapper { background: var(--white); } .contact-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); padding: 4rem 0; text-align: center; } .contact-hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; } .dn-hero-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .hero-locations { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .location-badge { background: rgba(255,255,255,0.2); padding: 0.75rem 1.25rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .location-badge i { color: var(--white); } .contact-content { padding: 4rem 0; } .dn-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .dn-contact-section-title { color: var(--dark); font-size: 1.75rem; font-weight: 700; margin-bottom: 2rem; } .office-location { margin-bottom: 2.5rem; } .office-title { color: var(--primary); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } .info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .info-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); font-size: 1.1rem; } .info-icon i { color: var(--white); } .info-content h3 { color: var(--dark); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .dn-contact-link { color: var(--text-blue); text-decoration: none; font-weight: 500; transition: var(--transition); } .dn-contact-link:hover { color: var(--primary); text-decoration: underline; } .dn-contact-text { color: var(--gray); font-weight: 500; } .dn-address { color: var(--gray); font-style: normal; line-height: 1.5; } .contact-details { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--border); } .hours-section { margin-top: 2.5rem; } .hours-section h3 { color: var(--dark); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .hours-section h3 i { color: var(--primary); } .hours-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .hours-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .hours-table tr:last-child td { border-bottom: none; } .hours-table td:first-child { color: var(--dark); font-weight: 600; } .hours-table td:last-child { color: var(--gray); text-align: right; } .services-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .service-tag { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .service-tag i { color: var(--white); } .map-section { background: var(--light-gray); padding: 4rem 0; } .map-section .UDA-section-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .map-section .UDA-section-title i { color: var(--primary); } .map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .map-location h3 { color: var(--dark); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .map-location h3 i { color: var(--primary); } .map-container { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); } .map-container iframe { width: 100%; height: 300px; border: none; } @media (max-width: 768px) { .contact-hero { padding: 3rem 0; } .contact-hero h1 { font-size: 2rem; } .dn-hero-subtitle { font-size: 1.1rem; } .hero-locations { flex-direction: column; align-items: center; } .contact-content { padding: 3rem 0; } .dn-contact-grid { grid-template-columns: 1fr; gap: 3rem; } .map-grid { grid-template-columns: 1fr; } .map-container iframe { height: 250px; } .services-tags { justify-content: center; } } @media (max-width: 480px) { .contact-hero { padding: 2rem 0; } .contact-hero h1 { font-size: 1.75rem; } .contact-content { padding: 2rem 0; } .dn-contact-grid { gap: 2rem; } .info-item { flex-direction: row; align-items: flex-start; } .hours-table td { padding: 0.5rem 0.75rem; font-size: 0.9rem; } .services-tags { gap: 0.5rem; justify-content: center; } .service-tag { font-size: 0.8rem; padding: 0.5rem 0.75rem; } .map-container iframe { height: 200px; } .location-badge { padding: 0.5rem 1rem; font-size: 0.85rem; } .map-section .UDA-section-title { font-size: 2rem; } } /* ========================================== contact you page ========================================== */ .dn-thank-you-page { min-height: auto; display: flex; align-items: center; justify-content: center; } .dn-thank-you-content { text-align: center; max-width: 600px; margin: 0 auto; background: var(--white); padding: 3rem 2rem; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); } .dn-thank-you-icon { margin-bottom: 2rem; } .dn-thank-you-icon i { font-size: 4rem; color: var(--primary); } .dn-thank-you-title { font-size: 5.5rem; font-weight: 700; color: var(--dark); margin-bottom: 1rem; line-height: 1.1; } .dn-thank-you-subtitle { font-size: 1.5rem; color: var(--text-blue); margin-bottom: 2rem; font-weight: 500; } .dn-thank-you-message { margin-bottom: 2.5rem; } .dn-thank-you-message p { color: var(--gray); font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; } .dn-thank-you-message p:last-child { margin-bottom: 0; } .dn-phone-link { color: var(--text-blue); text-decoration: none; font-weight: 600; transition: var(--transition); } .dn-phone-link:hover { color: var(--primary); text-decoration: underline; } .dn-thank-you-actions { margin-bottom: 2rem; } .dn-btn-home { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 1rem 2rem; border-radius: var(--border-radius-lg); text-decoration: none; font-weight: 600; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition); border: none; cursor: pointer; } .dn-btn-home:hover { background: linear-gradient(135deg, var(--secondary), var(--text-blue)); transform: translateY(-2px); box-shadow: var(--shadow-md); } .dn-btn-home i { color: var(--white); } .dn-thank-you-footer { border-top: 2px solid var(--border); padding-top: 1.5rem; margin-top: 1.5rem; } .dn-thank-you-footer p { color: var(--gray); font-size: 0.9rem; margin-bottom: 0.25rem; } .dn-thank-you-footer p:first-child { color: var(--dark); font-weight: 600; font-size: 1rem; } @media (max-width: 768px) { .dn-thank-you-content { padding: 2rem 1.5rem; margin: 1rem; } .dn-thank-you-title { font-size: 2.5rem; } .dn-thank-you-subtitle { font-size: 1.25rem; } .dn-thank-you-icon i { font-size: 3rem; } .dn-thank-you-message p { font-size: 1rem; } } @media (max-width: 480px) { .dn-thank-you-content { padding: 1.5rem 1rem; } .dn-thank-you-title { font-size: 2rem; } .dn-thank-you-subtitle { font-size: 1.1rem; } .dn-thank-you-icon i { font-size: 2.5rem; } .dn-btn-home { width: 100%; justify-content: center; } .dn-thank-you-message p { font-size: 0.95rem; } } :root { --uda-primary: #194A9A; --uda-secondary: #2F62AD; --uda-text-blue: #348EDF; --uda-accent: #DF4756; --uda-dark: #011F4E; --uda-white: #ffffff; --uda-light-gray: #f8f9fa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--uda-dark); background-color: var(--uda-white); } .uda-contact-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .uda-hero-section { background: linear-gradient(135deg, var(--uda-primary) 0%, var(--uda-secondary) 100%); color: var(--uda-white); padding: 80px 0; text-align: center; border-radius: 12px; margin-bottom: 60px; } .uda-hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 20px; } .uda-hero-subtitle { font-size: 1.4rem; font-weight: 300; margin-bottom: 30px; opacity: 0.9; } .uda-location-badges { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .uda-location-badge { background-color: var(--uda-accent); color: var(--uda-white); padding: 12px 24px; border-radius: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .uda-location-badge i { color: var(--uda-white); } .uda-main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; } .uda-form-section { background-color: var(--uda-light-gray); padding: 40px; border-radius: 12px; border: 2px solid var(--uda-primary); } .uda-section-title { color: var(--uda-primary); font-size: 2rem; font-weight: 600; margin-bottom: 30px; text-align: center; } .uda-form-group { margin-bottom: 25px; } .uda-form-label { display: block; color: var(--uda-dark); font-weight: 500; margin-bottom: 8px; } .uda-form-input, .uda-form-select, .uda-form-textarea { width: 100%; padding: 15px; border: 2px solid var(--uda-secondary); border-radius: 12px; font-size: 16px; transition: border-color 0.3s ease; background-color: var(--uda-white); color: var(--uda-dark); } .uda-form-input:focus, .uda-form-select:focus, .uda-form-textarea:focus { outline: none; border-color: var(--uda-text-blue); } .uda-form-textarea { resize: vertical; min-height: 120px; } .uda-submit-btn { background: linear-gradient(135deg, var(--uda-primary) 0%, var(--uda-secondary) 100%); color: var(--uda-white); padding: 15px 40px; border: none; border-radius: 12px; font-size: 18px; font-weight: 600; cursor: pointer; width: 100%; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; } .uda-submit-btn:hover { transform: translateY(-2px); } .uda-submit-btn i { color: var(--uda-white); } .uda-info-section { padding: 40px; background-color: var(--uda-white); border-radius: 12px; border: 2px solid var(--uda-primary); } .uda-office-location { margin-bottom: 30px; } .uda-office-title { color: var(--uda-primary); font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; } .uda-info-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px; background-color: var(--uda-light-gray); border-radius: 12px; border: 1px solid var(--uda-secondary); margin-bottom: 15px; } . .uda-info-icon i { color: var(--uda-white); } .uda-info-content { color: var(--uda-dark); line-height: 1.6; flex: 1; } .uda-info-content h3 { color: var(--uda-primary); font-weight: 600; margin-bottom: 5px; } .uda-info-content a { color: var(--uda-text-blue); text-decoration: none; transition: color 0.3s ease; } .uda-info-content a:hover { color: var(--uda-accent); } .uda-contact-details { margin: 30px 0; } .uda-contact-details .uda-info-item:last-child { margin-bottom: 0; } .uda-info-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #194A9A; border-radius: 50%; flex-shrink: 0; z-index:0; } .uda-info-icon i { font-size: 12px; color: #FFFFFF; z-index:10; } /* Optional: Different sizes for different contexts */ .uda-office-location .uda-info-icon i { font-size: 20px; } .uda-contact-details .uda-info-icon i { font-size: 16px; } /* Optional: Hover effect */ .uda-info-icon:hover { background: #348EDF; transition: background 300ms ease; } .uda-hours-section { background-color: var(--uda-light-gray); padding: 25px; border-radius: 12px; margin: 30px 0; border: 1px solid var(--uda-secondary); } .uda-hours-title { color: var(--uda-primary); font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; text-align: center; } .uda-hours-table { width: 100%; border-collapse: collapse; } .uda-hours-table td { padding: 10px 15px; border-bottom: 1px solid var(--uda-secondary); color: var(--uda-dark); } .uda-hours-table td:first-child { font-weight: 600; color: var(--uda-primary); } .uda-hours-table tr:last-child td { border-bottom: none; } .uda-services-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .uda-service-tag { background-color: var(--uda-text-blue); color: var(--uda-white); padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; } .uda-map-section { margin-top: 60px; text-align: center; } .uda-map-title { color: var(--uda-primary); font-size: 2rem; font-weight: 600; margin-bottom: 40px; } .uda-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .uda-map-location { background-color: var(--uda-white); border: 2px solid var(--uda-primary); border-radius: 12px; overflow: hidden; } .uda-map-header { background-color: var(--uda-primary); color: var(--uda-white); padding: 20px; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; } .uda-map-header i { color: var(--uda-white); } .uda-map-container { height: 300px; position: relative; } .uda-map-container iframe { width: 100%; height: 100%; border: none; } @media (max-width: 768px) { .uda-hero-title { font-size: 2rem; } .uda-hero-subtitle { font-size: 1.2rem; } .uda-main-content { grid-template-columns: 1fr; gap: 40px; } .uda-map-grid { grid-template-columns: 1fr; } .uda-location-badges { flex-direction: column; align-items: center; } .uda-form-section, .uda-info-section { padding: 25px; } .uda-info-item { flex-direction: column; text-align: center; align-items: center; } .uda-info-icon { margin: 0 auto; } } @media (max-width: 480px) { .uda-contact-wrapper { padding: 0 15px; } .uda-hero-section { padding: 50px 20px; } .uda-form-section, .uda-info-section { padding: 20px; } .uda-services-tags { justify-content: center; } .uda-info-item { padding: 15px; } } /* About us Intercore Technologies CSS */ /* Brand Colors */ :root { --abt-primary: #194A9A; --abt-secondary: #2F62AD; --abt-text-blue: #348EDF; --abt-accent: #DF4756; --abt-dark: #011F4E; } .abt-container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Hero Section */ .abt-hero-section { background: linear-gradient(135deg, var(--abt-primary) 0%, var(--abt-secondary) 100%); color: white; padding: 60px 40px; text-align: center; border-radius: 12px; margin-bottom: 50px; } .abt-hero-title { font-size: 2.8em; font-weight: bold; margin-bottom: 20px; line-height: 1.2; color: white; } .abt-hero-subtitle { font-size: 1.3em; opacity: 0.95; max-width: 800px; margin: 0 auto; color: white; } .abt-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 40px; max-width: 900px; margin-left: auto; margin-right: auto; } .abt-stat-card { background: rgba(255, 255, 255, 0.2); padding: 20px; border-radius: 8px; } .abt-stat-number { font-size: 2.5em; font-weight: bold; display: block; } .abt-stat-label { font-size: 0.9em; opacity: 0.9; margin-top: 5px; display: block; } /* Comparison Section */ .abt-comparison-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 50px 0; padding: 40px; background: #f8f9fa; border-radius: 12px; } .abt-comparison-grid { display: contents; } .abt-comparison-column { display: flex; flex-direction: column; } .abt-comparison-header { font-size: 1.5em; margin-bottom: 20px; } .abt-comparison-header.abt-negative { color: var(--abt-accent); } .abt-comparison-header.abt-positive { color: var(--abt-text-blue); } .abt-comparison-item { padding: 10px 0; border-bottom: 1px solid #e9ecef; } .abt-comparison-item.abt-no-border { border-bottom: none; } /* Section Headers */ .abt-section-header { text-align: center; margin: 60px 0 40px; } .abt-section-title { font-size: 2.3em; color: var(--abt-dark); margin-bottom: 15px; } .abt-section-subtitle { font-size: 1.1em; color: #7f8c8d; max-width: 700px; margin: 0 auto; } /* Timeline Section */ .abt-timeline-section { padding: 40px 0; } .abt-timeline-item { display: grid; grid-template-columns: 200px 1fr; gap: 40px; margin-bottom: 40px; padding: 30px; background: white; border-left: 4px solid var(--abt-primary); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-radius: 8px; } .abt-timeline-date { font-size: 2em; font-weight: bold; color: var(--abt-primary); } .abt-timeline-title { color: var(--abt-dark); margin-bottom: 15px; font-size: 1.4em; } .abt-timeline-list { list-style: none; padding: 0; } .abt-timeline-list-item { padding: 8px 0; padding-left: 25px; position: relative; } .abt-timeline-list-item::before { content: "✓"; position: absolute; left: 0; color: var(--abt-text-blue); font-weight: bold; } /* Clients Grid */ .abt-clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 40px 0; padding: 40px; background: #f8f9fa; border-radius: 12px; } .abt-client-card { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .abt-client-icon { font-size: 2.5em; margin-bottom: 15px; } .abt-client-name { color: var(--abt-primary); margin-bottom: 10px; } .abt-client-description { margin: 0; } /* Advantages Grid */ .abt-advantages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 40px 0; } .abt-advantage-card { background: linear-gradient(135deg, var(--abt-primary) 0%, var(--abt-secondary) 100%); color: white; padding: 30px; border-radius: 12px; position: relative; } .abt-advantage-number { position: absolute; top: 15px; right: 20px; font-size: 3em; opacity: 0.2; font-weight: bold; } .abt-advantage-title { font-size: 1.4em; margin-bottom: 15px; color: white; } .abt-advantage-description { color: white; } /* Platforms Section */ .abt-platforms-section { background: #f8f9fa; padding: 40px; border-radius: 12px; margin: 40px 0; } .abt-platforms-title { text-align: center; color: var(--abt-dark); margin-bottom: 30px; font-size: 1.8em; } .abt-platforms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; } .abt-platform-card { background: white; padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #e9ecef; } .abt-platform-check { color: var(--abt-text-blue); font-size: 2em; margin-bottom: 10px; } .abt-platform-card p { margin: 0; } /* Metrics Section */ .abt-metrics-section { background: linear-gradient(135deg, var(--abt-primary) 0%, var(--abt-secondary) 100%); color: white; padding: 50px 40px; border-radius: 12px; margin: 50px 0; text-align: center; } .abt-metrics-title { font-size: 2em; margin-bottom: 40px; color: white; } .abt-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } .abt-metric-card { background: rgba(255, 255, 255, 0.15); padding: 25px; border-radius: 8px; } .abt-metric-number { font-size: 2.5em; font-weight: bold; display: block; margin-bottom: 10px; } .abt-metric-label { margin: 0; } /* Approach Section */ .abt-approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 50px 0; padding: 40px; background: #f8f9fa; border-radius: 12px; } .abt-approach-heading { color: var(--abt-primary); } .abt-approach-heading.abt-spacing { margin-top: 30px; } .abt-approach-text { margin-bottom: 0; } /* Alerts */ .abt-alert { padding: 20px; margin: 30px 0; border-radius: 4px; } .abt-warning-alert { background: #fef5e7; border-left: 4px solid var(--abt-accent); } .abt-success-alert { background: #e8f4fd; border-left: 4px solid var(--abt-text-blue); } /* Future Section */ .abt-future-section { padding: 40px 0; } .abt-future-item { display: grid; grid-template-columns: 200px 1fr; gap: 40px; margin-bottom: 40px; padding: 30px; background: white; border-left: 4px solid var(--abt-primary); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-radius: 8px; } .abt-future-date { font-size: 2em; font-weight: bold; color: var(--abt-primary); } .abt-future-title { color: var(--abt-dark); margin-bottom: 15px; font-size: 1.4em; } .abt-future-list { list-style: none; padding: 0; } .abt-future-list-item { padding: 8px 0; padding-left: 25px; position: relative; } .abt-future-list-item::before { content: "✓"; position: absolute; left: 0; color: var(--abt-text-blue); font-weight: bold; } /* Leadership Section */ .abt-leadership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 50px 0; padding: 40px; background: #f8f9fa; border-radius: 12px; } .abt-leadership-heading { color: var(--abt-primary); } .abt-leadership-description { margin-bottom: 15px; } .abt-leadership-list, .abt-recognition-list { list-style: none; padding: 0; margin-top: 10px; } .abt-leadership-list li, .abt-recognition-list li { margin-bottom: 5px; } /* CTA Section */ .abt-cta-section { background: linear-gradient(135deg, var(--abt-primary) 0%, var(--abt-secondary) 100%); color: white; padding: 60px 40px; border-radius: 12px; text-align: center; margin: 50px 0; } .abt-cta-title { font-size: 2.3em; margin-bottom: 20px; color: white; } .abt-cta-subtitle { font-size: 1.2em; margin-bottom: 30px; opacity: 0.95; color: white; } .abt-cta-benefits { background: rgba(255, 255, 255, 0.2); padding: 25px; border-radius: 8px; margin: 30px auto; max-width: 700px; } .abt-benefits-title { margin-bottom: 20px; color: white; } .abt-benefits-list { list-style: none; padding: 0; text-align: left; } .abt-benefits-item { margin-bottom: 10px; color: white; } .abt-cta-button { display: inline-block; background: white; color: var(--abt-primary); padding: 18px 40px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 1.1em; margin: 20px 0; transition: transform 0.2s; } .abt-cta-button:hover { transform: translateY(-2px); } .abt-cta-phone { margin-top: 30px; font-size: 1.2em; color: white; } .abt-cta-offer { font-size: 1em; opacity: 0.9; color: white; } /* Footer */ .abt-footer { text-align: center; padding: 40px 20px; background: #f8f9fa; border-radius: 12px; margin-top: 50px; } .abt-footer-title { color: var(--abt-dark); margin-bottom: 20px; } .abt-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 800px; margin: 0 auto; } .abt-footer-heading { color: var(--abt-primary); } .abt-footer-text { margin: 0; } .abt-footer-bottom { margin-top: 30px; color: #7f8c8d; } /* Responsive Design */ @media (max-width: 768px) { .abt-hero-title { font-size: 2.2em; } .abt-hero-subtitle { font-size: 1.1em; } .abt-comparison-section { grid-template-columns: 1fr; } .abt-timeline-item, .abt-future-item { grid-template-columns: 1fr; gap: 20px; } .abt-approach-grid, .abt-leadership-grid { grid-template-columns: 1fr; } .abt-section-title { font-size: 1.8em; } .abt-cta-title { font-size: 1.8em; } } /* Solutions page */ /* Solutions page */ /* Solutions page */ /* Solutions page */ :root { --primary: #194A9A; --secondary: #2F62AD; --text-blue: #348EDF; --accent: #DF4756; --dark: #011F4E; --white: #ffffff; --light-gray: #f8f9fa; --border: #e5e7eb; --text-dark: #1f2937; --text-gray: #6b7280; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text-dark); background: var(--white); } .UDA-container { max-width: 1200px; margin: 0 auto; padding: 0 0px; } .UDA-hero { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; } .UDA-hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .UDA-hero-subtitle { font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.95; } .UDA-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto; } .UDA-stat-item { text-align: center; } .UDA-stat-number { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } .UDA-stat-label { font-size: 1rem; opacity: 0.9; } .UDA-mt-2 { margin-top: 2rem; } .UDA-alert-banner { border-radius: 12px; margin: 2rem 0; overflow: hidden; } .UDA-alert-content { display: flex; align-items: center; padding: 1.5rem 2rem; gap: 1rem; } .UDA-alert-icon { font-size: 1.5rem; } .UDA-alert-text { flex: 1; } .UDA-alert-title { font-weight: 700; color: var(--text-dark); margin-bottom: 0.25rem; } .UDA-alert-description { color: var(--text-gray); margin: 0; } .UDA-alert-btn { background: var(--accent); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; } .UDA-alert-btn:hover { background: #c53030; transform: translateY(-1px); } .UDA-bg-light { background: var(--light-gray); } .UDA-section-padding-sm { padding: 60px 0; } .UDA-section-padding { padding: 80px 0; } .UDA-section-title { font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 1rem; color: var(--text-dark); } .UDA-font-size-lg { font-size: 2rem; } .UDA-grid { display: grid; gap: 2rem; } .UDA-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .UDA-grid-auto { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .UDA-card { background: var(--white); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 1px solid var(--border); } .UDA-card-sm { padding: 1.5rem; } .UDA-text-center { text-align: center; } .UDA-card-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); } .UDA-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .UDA-font-size-sm { font-size: 0.875rem; } .UDA-card-description { color: var(--text-gray); } .UDA-color-gray { color: var(--text-gray); } .UDA-mb-2 { margin-bottom: 2rem; } .practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .practice-card { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border: 1px solid var(--border); } .practice-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .card-header { padding: 24px; color: var(--white); position: relative; overflow: hidden; } .card-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .card-header h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; z-index: 2; } .card-header p { opacity: 0.9; font-size: 0.95rem; position: relative; z-index: 2; } .personal-injury { background: linear-gradient(135deg, var(--accent), #e74c3c); } .family-law { background: linear-gradient(135deg, var(--primary), var(--secondary)); } .criminal-defense { background: linear-gradient(135deg, var(--dark), #1a1a2e); } .employment-law { background: linear-gradient(135deg, var(--secondary), var(--text-blue)); } .estate-probate { background: linear-gradient(135deg, var(--text-blue), var(--primary)); } .immigration-law { background: linear-gradient(135deg, var(--accent), #ff6b6b); } .bankruptcy-law { background: linear-gradient(135deg, var(--primary), var(--dark)); } .general-practice { background: linear-gradient(135deg, var(--secondary), var(--accent)); } .card-body { padding: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .stat-item { text-align: center; } .stat-label { font-size: 0.75rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 600; } .stat-value { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); } .stat-value.roi { color: var(--accent); } .performance-details { margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; } .performance-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .performance-label { font-weight: 600; color: var(--text-dark); } .performance-value { color: var(--text-gray); } .geo-opportunity { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border-left: 4px solid var(--text-blue); padding: 16px; margin-bottom: 20px; border-radius: 8px; } .geo-title { font-weight: 700; color: var(--text-blue); margin-bottom: 8px; font-size: 0.9rem; } .geo-description { font-size: 0.85rem; color: var(--text-gray); margin: 0; } .cta-button { display: block; width: 100%; padding: 14px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; text-align: center; transition: all 0.2s ease; cursor: pointer; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--dark); transform: translateY(-1px); } .btn-secondary { background: var(--secondary); color: var(--white); } .btn-secondary:hover { background: var(--primary); transform: translateY(-1px); } .btn-accent { background: var(--accent); color: var(--white); } .btn-accent:hover { background: #c53030; transform: translateY(-1px); } .btn-text-blue { background: var(--text-blue); color: var(--white); } .btn-text-blue:hover { background: var(--secondary); transform: translateY(-1px); } .UDA-bg-dark { background: var(--dark); } .UDA-text-white { color: var(--white); } table { width: 100%; border-collapse: collapse; margin: 2rem 0; } th, td { padding: 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); } th { font-weight: 600; background: rgba(255,255,255,0.05); } .UDA-btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; } .UDA-success-number { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .UDA-cta { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; } .UDA-cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; } .UDA-cta-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .UDA-hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .UDA-btn-primary { background: var(--white); color: var(--primary); } .UDA-btn-primary:hover { background: var(--light-gray); transform: translateY(-1px); } .UDA-btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); } .UDA-btn-secondary:hover { background: var(--white); color: var(--primary); transform: translateY(-1px); } .UDA-opacity-90 { opacity: 0.9; } @media (max-width: 768px) { .practice-grid { grid-template-columns: 1fr; gap: 1.5rem; } .UDA-hero-title { font-size: 2rem; } .UDA-section-title { font-size: 2rem; } .stats-grid { gap: 0.75rem; } .stat-value { font-size: 1.1rem; } .UDA-stats-grid { grid-template-columns: 1fr; gap: 1rem; } .UDA-alert-content { flex-direction: column; text-align: center; } .UDA-hero-buttons { flex-direction: column; align-items: center; } .UDA-btn { min-width: 200px; } } Solutions :root { --primary: #194A9A; --secondary: #2F62AD; --text-blue: #348EDF; --accent: #DF4756; --dark: #011F4E; --white: #ffffff; --light-gray: #f8f9fa; --border: #e5e7eb; --text-dark: #1f2937; --text-gray: #6b7280; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text-dark); background: var(--white); } .UDA-container { max-width: 1200px; margin: 0 auto; padding: 0 0px; } .UDA-hero { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; } .UDA-hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .UDA-hero-subtitle { font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.95; } .UDA-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto; } .UDA-stat-item { text-align: center; } .UDA-stat-number { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } .UDA-stat-label { font-size: 1rem; opacity: 0.9; } .UDA-mt-2 { margin-top: 2rem; } .UDA-alert-banner { border: 1px solid #f59e0b; border-radius: 12px; margin: 2rem 0; overflow: hidden; } .UDA-alert-content { display: flex; align-items: center; padding: 1.5rem 2rem; gap: 1rem; } .UDA-alert-icon { font-size: 1.5rem; } .UDA-alert-text { flex: 1; } .UDA-alert-title { font-weight: 700; color: var(--text-dark); margin-bottom: 0.25rem; } .UDA-alert-description { color: var(--text-gray); margin: 0; } .UDA-alert-btn { background: var(--accent); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; } .UDA-alert-btn:hover { background: #c53030; transform: translateY(-1px); } .UDA-bg-light { background: var(--light-gray); } .UDA-section-padding-sm { padding: 60px 0; } .UDA-section-padding { padding: 80px 0; } .UDA-section-title { font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 1rem; color: var(--text-dark); } .UDA-font-size-lg { font-size: 2rem; } .UDA-grid { display: grid; gap: 2rem; } .UDA-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .UDA-grid-auto { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .UDA-card { background: var(--white); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 1px solid var(--border); } .UDA-card-sm { padding: 1.5rem; } .UDA-text-center { text-align: center; } .UDA-card-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); } .UDA-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .UDA-font-size-sm { font-size: 0.875rem; } .UDA-card-description { color: var(--text-gray); } .UDA-color-gray { color: var(--text-gray); } .UDA-mb-2 { margin-bottom: 2rem; } .practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .practice-card { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border: 1px solid var(--border); } .practice-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .card-header { padding: 24px; color: var(--white); position: relative; overflow: hidden; } .card-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .card-header h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; z-index: 2; } .card-header p { opacity: 0.9; font-size: 0.95rem; position: relative; z-index: 2; } .personal-injury { background: linear-gradient(135deg, var(--accent), #e74c3c); } .family-law { background: linear-gradient(135deg, var(--primary), var(--secondary)); } .criminal-defense { background: linear-gradient(135deg, var(--dark), #1a1a2e); } .employment-law { background: linear-gradient(135deg, var(--secondary), var(--text-blue)); } .estate-probate { background: linear-gradient(135deg, var(--text-blue), var(--primary)); } .immigration-law { background: linear-gradient(135deg, var(--accent), #ff6b6b); } .bankruptcy-law { background: linear-gradient(135deg, var(--primary), var(--dark)); } .general-practice { background: linear-gradient(135deg, var(--secondary), var(--accent)); } .card-body { padding: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .stat-item { text-align: center; } .stat-label { font-size: 0.75rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 600; } .stat-value { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); } .stat-value.roi { color: var(--accent); } .performance-details { margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; } .performance-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .performance-label { font-weight: 600; color: var(--text-dark); } .performance-value { color: var(--text-gray); } .geo-opportunity { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border-left: 4px solid var(--text-blue); padding: 16px; margin-bottom: 20px; border-radius: 8px; } .geo-title { font-weight: 700; color: var(--text-blue); margin-bottom: 8px; font-size: 0.9rem; } .geo-description { font-size: 0.85rem; color: var(--text-gray); margin: 0; } .cta-button { display: block; width: 100%; padding: 14px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; text-align: center; transition: all 0.2s ease; cursor: pointer; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--dark); transform: translateY(-1px); } .btn-secondary { background: var(--secondary); color: var(--white); } .btn-secondary:hover { background: var(--primary); transform: translateY(-1px); } .btn-accent { background: var(--accent); color: var(--white); } .btn-accent:hover { background: #c53030; transform: translateY(-1px); } .btn-text-blue { background: var(--text-blue); color: var(--white); } .btn-text-blue:hover { background: var(--secondary); transform: translateY(-1px); } .UDA-bg-dark { background: var(--dark); } .UDA-text-white { color: var(--white); } table { width: 100%; border-collapse: collapse; margin: 2rem 0; } th, td { padding: 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); } th { font-weight: 600; background: rgba(255,255,255,0.05); } .UDA-btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; } .UDA-success-number { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .UDA-cta { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; } .UDA-cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; } .UDA-cta-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .UDA-hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .UDA-btn-primary { background: var(--white); color: var(--primary); } .UDA-btn-primary:hover { background: var(--light-gray); transform: translateY(-1px); } .UDA-btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); } .UDA-btn-secondary:hover { background: var(--white); color: var(--primary); transform: translateY(-1px); } .UDA-opacity-90 { opacity: 0.9; } @media (max-width: 768px) { .practice-grid { grid-template-columns: 1fr; gap: 1.5rem; } .UDA-hero-title { font-size: 2rem; } .UDA-section-title { font-size: 2rem; } .stats-grid { gap: 0.75rem; } .stat-value { font-size: 1.1rem; } .UDA-stats-grid { grid-template-columns: 1fr; gap: 1rem; } .UDA-alert-content { flex-direction: column; text-align: center; } .UDA-hero-buttons { flex-direction: column; align-items: center; } .UDA-btn { min-width: 200px; } } /* ========================================== Become A Contributor ========================================== */ :root { --color-primary: #194A9A; --color-secondary: #2F62AD; --color-text-blue: #348EDF; --color-accent: #DF4756; --color-dark: #011F4E; --color-white: #ffffff; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --font-size-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --border-radius: 0.75rem; --border-radius-lg: 1rem; --border-radius-xl: 1.5rem; --border-radius-button: 0.875rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .htfaic-guide { min-height: 100vh; } .htfaic-guide__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 768px) { .htfaic-guide__container { padding: 0 var(--space-4); } } .htfaic-guide__hero { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%); color: var(--color-white); padding: var(--space-20) 0 var(--space-16); text-align: center; } .htfaic-guide__title { font-size: var(--font-size-4xl); font-weight: 700; line-height: var(--line-height-tight); margin-bottom: var(--space-8); max-width: 900px; margin-left: auto; margin-right: auto; } .htfaic-guide__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-6); font-size: var(--font-size-sm); opacity: 0.9; flex-wrap: wrap; } .htfaic-guide__meta::before { content: ''; height: 1px; background-color: currentColor; opacity: 0.3; flex-grow: 1; max-width: 50px; } .htfaic-guide__meta::after { content: ''; height: 1px; background-color: currentColor; opacity: 0.3; flex-grow: 1; max-width: 50px; } @media (max-width: 600px) { .htfaic-guide__meta { flex-direction: column; gap: var(--space-2); } .htfaic-guide__meta::before, .htfaic-guide__meta::after { display: none; } } .htfaic-guide__lead { background-color: var(--color-gray-50); padding: var(--space-16) 0; } .htfaic-guide__lead-paragraph { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); color: var(--color-gray-900); } .htfaic-guide__lead-summary { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-gray-900); } .htfaic-guide__toc { background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-200); padding: var(--space-12) 0; } .htfaic-toc { background-color: var(--color-primary); color: var(--color-white); padding: var(--space-8); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); } .htfaic-toc__title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--space-6); text-align: center; } .htfaic-toc__list { list-style: none; display: grid; gap: var(--space-4); } @media (min-width: 768px) { .htfaic-toc__list { grid-template-columns: repeat(2, 1fr); } } .htfaic-toc__item { position: relative; padding-left: var(--space-6); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .htfaic-toc__item::before { content: '→'; position: absolute; left: 0; color: var(--color-text-blue); font-weight: 600; } .htfaic-guide__content { padding: var(--space-20) 0; } .htfaic-content-section { margin-bottom: var(--space-20); } .htfaic-content-section__title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-6); line-height: var(--line-height-snug); } .htfaic-content-section__intro { font-size: var(--font-size-lg); color: var(--color-gray-900); margin-bottom: var(--space-8); line-height: var(--line-height-relaxed); } .htfaic-content-section__subsection { margin-bottom: var(--space-12); } .htfaic-content-section__subtitle { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-4); line-height: var(--line-height-snug); } .htfaic-content-section p { margin-bottom: var(--space-4); line-height: var(--line-height-relaxed); color: var(--color-gray-900); } .htfaic-content-section ul:not(.htfaic-keyword-card__list):not(.htfaic-toc__list):not(.htfaic-kpi-list):not(.htfaic-geographic-list):not(.htfaic-resource-category__list) { margin: var(--space-6) 0; padding-left: var(--space-6); } .htfaic-content-section li { margin-bottom: var(--space-2); line-height: var(--line-height-normal); color: var(--color-gray-900); } .htfaic-content-section a { color: var(--color-text-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .htfaic-content-section a:hover { color: var(--color-primary); text-decoration: underline; } .htfaic-content-section a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } .htfaic-keyword-grid { display: grid; gap: var(--space-6); margin: var(--space-8) 0; } @media (min-width: 768px) { .htfaic-keyword-grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } .htfaic-keyword-card { background-color: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } .htfaic-keyword-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .htfaic-keyword-card__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-4); } .htfaic-keyword-card__list { list-style: none; margin: 0; padding: 0; } .htfaic-keyword-card__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-100); font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; font-size: var(--font-size-sm); color: var(--color-gray-900); } .htfaic-keyword-card__list li:last-child { border-bottom: none; } .htfaic-geographic-list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-4); } @media (min-width: 768px) { .htfaic-geographic-list { grid-template-columns: repeat(2, 1fr); } } .htfaic-geographic-list li { background-color: var(--color-gray-50); padding: var(--space-4); border-radius: var(--border-radius); border-left: 4px solid var(--color-text-blue); color: var(--color-gray-900); } .htfaic-kpi-list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-4); } .htfaic-kpi-list li { background-color: var(--color-white); border: 1px solid var(--color-gray-200); padding: var(--space-4); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); color: var(--color-gray-900); } .htfaic-guide__cta { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-white); padding: var(--space-20) 0; } .htfaic-cta-content { text-align: center; } .htfaic-cta-content__title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-8); line-height: var(--line-height-tight); } .htfaic-cta-content__text { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); opacity: 0.9; max-width: 800px; margin-left: auto; margin-right: auto; } .htfaic-cta-card { background-color: var(--color-white); color: var(--color-gray-900); border-radius: var(--border-radius-lg); padding: var(--space-8); margin-top: var(--space-12); box-shadow: var(--shadow-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .htfaic-cta-card__title { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-6); text-align: center; } .htfaic-cta-card__text { margin-bottom: var(--space-4); line-height: var(--line-height-relaxed); text-align: center; color: var(--color-gray-900); } .htfaic-cta-card__button { display: inline-block; background-color: var(--color-accent); color: var(--color-white); padding: var(--space-4) var(--space-8); border-radius: var(--border-radius-button); text-decoration: none; font-weight: 600; font-size: var(--font-size-lg); transition: all 0.2s ease; margin-top: var(--space-4); box-shadow: var(--shadow-md); } .htfaic-cta-card__button:hover { background-color: #c73d4a; transform: translateY(-1px); box-shadow: var(--shadow-lg); } .htfaic-cta-card__button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .htfaic-guide__resources { background-color: var(--color-gray-50); padding: var(--space-16) 0; } .htfaic-resources__title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-dark); text-align: center; margin-bottom: var(--space-12); } .htfaic-resources__grid { display: grid; gap: var(--space-8); } @media (min-width: 768px) { .htfaic-resources__grid { grid-template-columns: repeat(2, 1fr); } } .htfaic-resource-category { background-color: var(--color-white); padding: var(--space-6); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); } .htfaic-resource-category__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-4); } .htfaic-resource-category__list { list-style: none; margin: 0; padding: 0; } .htfaic-resource-category__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-900); } .htfaic-resource-category__list li:last-child { border-bottom: none; } .htfaic-resource-category__list a { color: var(--color-text-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .htfaic-resource-category__list a:hover { color: var(--color-primary); text-decoration: underline; } .htfaic-guide__footer { background-color: var(--color-dark); color: var(--color-white); padding: var(--space-8) 0; text-align: center; } .htfaic-footer__text { font-size: var(--font-size-sm); opacity: 0.8; } .htfaic-footer__link { color: var(--color-text-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .htfaic-footer__link:hover { color: var(--color-white); text-decoration: underline; } .htfaic-footer__link:focus-visible { outline: 2px solid var(--color-text-blue); outline-offset: 2px; border-radius: 2px; } @media (max-width: 768px) { .htfaic-guide__hero { padding: var(--space-16) 0 var(--space-12); } .htfaic-guide__lead, .htfaic-guide__content, .htfaic-guide__cta, .htfaic-guide__resources { padding-top: var(--space-12); padding-bottom: var(--space-12); } .htfaic-content-section { margin-bottom: var(--space-16); } .htfaic-content-section__subsection { margin-bottom: var(--space-8); } } @media (max-width: 480px) { .htfaic-guide__title { font-size: var(--font-size-3xl); } .htfaic-content-section__title { font-size: var(--font-size-xl); } .htfaic-content-section__subtitle { font-size: var(--font-size-lg); } .htfaic-cta-content__title { font-size: var(--font-size-2xl); } } /* ========================================== sitemap ========================================== */ .wrap-html-sitemap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; line-height: 1.6; color: #0f172a; } .sp-wrap-cpt { margin-bottom: 3rem; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); overflow: hidden; } .sp-cpt-name { background: linear-gradient(135deg, #011F4E 0%, #194A9A 100%); color: #ffffff; margin: 0; padding: 1.5rem 2rem; font-size: 1.5rem; font-weight: 700; border: none; } .sp-list-posts { list-style: none; margin: 0; padding: 0; } .sp-cpt-hierarchical { padding: 1.5rem 2rem 2rem; } .sp-cpt-hierarchical > .page_item { margin-bottom: 0.75rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.75rem; } .sp-cpt-hierarchical > .page_item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .page_item > a { color: #194A9A; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: color 0.2s ease; display: block; } .page_item > a:hover { color: #348EDF; text-decoration: underline; } .page_item > a:focus { outline: 2px solid #348EDF; outline-offset: 2px; border-radius: 4px; } .children { list-style: none; margin: 0.75rem 0 0 1.5rem; padding: 0; border-left: 2px solid #e2e8f0; padding-left: 1rem; } .children .page_item { margin-bottom: 0.5rem; } .children .page_item:last-child { margin-bottom: 0; } .children a { color: #2F62AD; text-decoration: none; font-weight: 500; font-size: 1rem; transition: color 0.2s ease; display: block; padding: 0.25rem 0; } .children a:hover { color: #348EDF; text-decoration: underline; } .children a:focus { outline: 2px solid #348EDF; outline-offset: 2px; border-radius: 4px; } .sp-wrap-cats { padding: 0 2rem 2rem; } .sp-wrap-cat { margin-bottom: 2rem; border-left: 4px solid #348EDF; background-color: #f8fafc; border-radius: 0 8px 8px 0; padding: 1.5rem; } .sp-wrap-cat:last-child { margin-bottom: 0; } .sp-cat-name { margin: 0 0 1rem 0; font-size: 1.25rem; font-weight: 600; } .sp-cat-name a { color: #011F4E; text-decoration: none; transition: color 0.2s ease; } .sp-cat-name a:hover { color: #194A9A; text-decoration: underline; } .sp-cat-name a:focus { outline: 2px solid #348EDF; outline-offset: 2px; border-radius: 4px; } .sp-wrap-cat .sp-list-posts { padding: 0; } .sp-wrap-cat .sp-list-posts li { margin-bottom: 0.75rem; padding: 0.75rem; background-color: #ffffff; border-radius: 6px; border: 1px solid #e2e8f0; transition: all 0.2s ease; } .sp-wrap-cat .sp-list-posts li:last-child { margin-bottom: 0; } .sp-wrap-cat .sp-list-posts li:hover { border-color: #348EDF; box-shadow: 0 2px 4px -1px rgb(52 142 223 / 0.1); } .sp-wrap-cat .sp-list-posts a { color: #2F62AD; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .sp-wrap-cat .sp-list-posts a:hover { color: #194A9A; text-decoration: underline; } .sp-wrap-cat .sp-list-posts a:focus { outline: 2px solid #348EDF; outline-offset: 2px; border-radius: 4px; } @media (max-width: 768px) { .wrap-html-sitemap { padding: 1.5rem 1rem; } .sp-cpt-name { font-size: 1.25rem; padding: 1rem 1.5rem; } .sp-cpt-hierarchical { padding: 1rem 1.5rem 1.5rem; } .sp-wrap-cats { padding: 0 1.5rem 1.5rem; } .sp-wrap-cat { padding: 1rem; } .children { margin-left: 1rem; padding-left: 0.75rem; } } @media (max-width: 480px) { .wrap-html-sitemap { padding: 1rem 0.75rem; } .sp-cpt-name { font-size: 1.125rem; padding: 0.75rem 1rem; } .sp-cpt-hierarchical { padding: 0.75rem 1rem 1rem; } .sp-wrap-cats { padding: 0 1rem 1rem; } .sp-wrap-cat { padding: 0.75rem; } .page_item > a { font-size: 1rem; } .sp-cat-name { font-size: 1.125rem; } } /* ========================================== services ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-50: #f8fafc; --dn-gray-100: #f1f5f9; --dn-gray-200: #e2e8f0; --dn-gray-300: #cbd5e1; --dn-gray-600: #475569; --dn-gray-700: #334155; --dn-gray-800: #1e293b; --dn-gray-900: #0f172a; --dn-space-4: 0.25rem; --dn-space-8: 0.5rem; --dn-space-12: 0.75rem; --dn-space-16: 1rem; --dn-space-20: 1.25rem; --dn-space-24: 1.5rem; --dn-space-32: 2rem; --dn-space-40: 2.5rem; --dn-space-48: 3rem; --dn-space-64: 4rem; --dn-space-80: 5rem; --dn-space-96: 6rem; --dn-space-128: 8rem; --dn-radius-sm: 0.25rem; --dn-radius-md: 0.5rem; --dn-radius-lg: 0.75rem; --dn-radius-xl: 1rem; --dn-radius-2xl: 1.5rem; --dn-radius-btn: 14px; --dn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --dn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --dn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --dn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --dn-duration-fast: 0.15s; --dn-duration-normal: 0.25s; --dn-duration-slow: 0.4s; --dn-font-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --dn-font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --dn-font-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --dn-font-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --dn-font-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --dn-font-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --dn-font-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --dn-font-5xl: clamp(2.625rem, 2.25rem + 1.875vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; font-size: var(--dn-font-base); line-height: 1.6; color: var(--dn-black); background-color: var(--dn-white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .dn_page { min-height: 100vh; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-space-20); } @media (max-width: 768px) { .dn_container { padding: 0 var(--dn-space-16); } } .dn_section-title { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-48); line-height: 1.2; animation: dn_fadeInUp 0.8s ease-out; } .dn_section-subtitle { font-size: var(--dn-font-lg); color: var(--dn-gray-600); text-align: center; margin-bottom: var(--dn-space-64); animation: dn_fadeInUp 0.8s ease-out 0.1s both; } .dn_btn { display: inline-block; padding: var(--dn-space-16) var(--dn-space-32); border-radius: var(--dn-radius-btn); text-decoration: none; font-weight: 600; font-size: var(--dn-font-base); border: none; cursor: pointer; transition: all var(--dn-duration-normal) ease; text-align: center; box-shadow: var(--dn-shadow-md); } .dn_btn--primary { background-color: var(--dn-primary); color: var(--dn-white); } .dn_btn--primary:hover { background-color: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--secondary { background-color: var(--dn-blue); color: var(--dn-white); } .dn_btn--secondary:hover { background-color: var(--dn-primary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--accent { background-color: var(--dn-accent); color: var(--dn-white); } .dn_btn--accent:hover { background-color: #c73d4a; transform: translateY(-2px); box-shadow: var(--dn-shadow-xl); } .dn_btn--large { padding: var(--dn-space-20) var(--dn-space-48); font-size: var(--dn-font-lg); } .dn_btn:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_hero { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; } .dn_hero__content { animation: dn_fadeInUp 0.8s ease-out; } .dn_hero__title { font-size: var(--dn-font-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-24); } .dn_hero__subtitle { font-size: var(--dn-font-xl); line-height: 1.4; margin-bottom: var(--dn-space-64); max-width: 900px; margin-left: auto; margin-right: auto; } .dn_hero__stats { display: grid; gap: var(--dn-space-32); max-width: 1000px; margin: 0 auto; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_hero__stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 600px) and (max-width: 899px) { .dn_hero__stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_hero__stats { grid-template-columns: repeat(4, 1fr); } } .dn_stat-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius-xl); padding: var(--dn-space-32); text-align: center; transition: transform var(--dn-duration-normal) ease; } .dn_stat-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_stat-card__number { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-blue); margin-bottom: var(--dn-space-8); } .dn_stat-card__label { font-size: var(--dn-font-sm); opacity: 0.9; } .dn_problem-solution { padding: var(--dn-space-128) 0; background: var(--dn-gray-50); } .dn_comparison { display: grid; gap: var(--dn-space-64); margin-bottom: var(--dn-space-64); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (min-width: 900px) { .dn_comparison { grid-template-columns: repeat(2, 1fr); } } .dn_comparison__side { background: var(--dn-white); padding: var(--dn-space-48); border-radius: var(--dn-radius-xl); box-shadow: var(--dn-shadow-lg); } .dn_comparison__side--problem { border-left: 4px solid var(--dn-accent); } .dn_comparison__side--solution { border-left: 4px solid var(--dn-blue); } .dn_comparison__title { font-size: var(--dn-font-xl); font-weight: 700; margin-bottom: var(--dn-space-32); } .dn_comparison__side--problem .dn_comparison__title { color: var(--dn-accent); } .dn_comparison__side--solution .dn_comparison__title { color: var(--dn-blue); } .dn_comparison__list { list-style: none; padding: 0; } .dn_comparison__item { display: flex; align-items: flex-start; margin-bottom: var(--dn-space-20); line-height: 1.6; } .dn_comparison__icon { font-size: 1.25rem; margin-right: var(--dn-space-12); flex-shrink: 0; margin-top: var(--dn-space-4); } .dn_comparison__item strong { color: var(--dn-primary); } .dn_cta-section { text-align: center; animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_services { padding: var(--dn-space-128) 0; } .dn_service-card { display: grid; gap: var(--dn-space-32); background: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-48); margin-bottom: var(--dn-space-48); box-shadow: var(--dn-shadow-lg); border: 1px solid var(--dn-gray-200); transition: all var(--dn-duration-normal) ease; animation: dn_fadeInUp 0.8s ease-out; } .dn_service-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } @media (min-width: 900px) { .dn_service-card { grid-template-columns: auto 1fr auto; align-items: center; } } .dn_service-card__icon { font-size: 3rem; text-align: center; } .dn_service-card__name { font-size: var(--dn-font-sm); color: var(--dn-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--dn-space-8); } .dn_service-card__title { font-size: var(--dn-font-xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); line-height: 1.3; } .dn_service-card__description { color: var(--dn-gray-700); margin-bottom: var(--dn-space-24); line-height: 1.6; } .dn_service-card__features { list-style: none; padding: 0; margin-bottom: var(--dn-space-32); } .dn_service-card__features li { color: var(--dn-gray-700); margin-bottom: var(--dn-space-8); font-size: var(--dn-font-sm); } .dn_service-card__stats { text-align: center; padding: var(--dn-space-32); background: linear-gradient(135deg, var(--dn-gray-50) 0%, var(--dn-gray-100) 100%); border-radius: var(--dn-radius-lg); border: 1px solid var(--dn-gray-200); } .dn_service-card__roi { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-4); } .dn_service-card__roi-label { font-size: var(--dn-font-sm); color: var(--dn-gray-600); margin-bottom: var(--dn-space-16); } .dn_service-card__price { font-size: var(--dn-font-lg); font-weight: 600; color: var(--dn-dark); } .dn_pricing { padding: var(--dn-space-128) 0; background: var(--dn-gray-50); } .dn_pricing-grid { display: grid; gap: var(--dn-space-32); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_pricing-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_pricing-grid { grid-template-columns: repeat(3, 1fr); } } .dn_pricing-card { background: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-48); box-shadow: var(--dn-shadow-lg); border: 2px solid var(--dn-gray-200); transition: all var(--dn-duration-normal) ease; position: relative; } .dn_pricing-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } .dn_pricing-card--featured { border-color: var(--dn-blue); transform: scale(1.05); } .dn_pricing-card--featured:hover { transform: scale(1.05) translateY(-4px); } .dn_pricing-card__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--dn-blue); color: var(--dn-white); padding: var(--dn-space-8) var(--dn-space-24); border-radius: var(--dn-radius-2xl); font-size: var(--dn-font-sm); font-weight: 700; } .dn_pricing-card__name { font-size: var(--dn-font-xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-16); } .dn_pricing-card__price { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-16); } .dn_pricing-card__period { font-size: var(--dn-font-lg); color: var(--dn-gray-600); font-weight: 400; } .dn_pricing-card__description { text-align: center; color: var(--dn-gray-600); margin-bottom: var(--dn-space-32); } .dn_pricing-card__features { list-style: none; padding: 0; margin-bottom: var(--dn-space-32); } .dn_pricing-card__features li { margin-bottom: var(--dn-space-12); line-height: 1.5; color: var(--dn-gray-700); } .dn_pricing-card__features a { color: var(--dn-blue); text-decoration: none; } .dn_pricing-card__features a:hover { text-decoration: underline; } .dn_pricing-card__results { background: linear-gradient(135deg, var(--dn-gray-50) 0%, var(--dn-gray-100) 100%); padding: var(--dn-space-20); border-radius: var(--dn-radius-lg); text-align: center; color: var(--dn-gray-700); border-left: 4px solid var(--dn-blue); } .dn_roi-calculator { padding: var(--dn-space-128) 0; } .dn_calculator { background: linear-gradient(135deg, var(--dn-gray-50) 0%, var(--dn-white) 100%); border-radius: var(--dn-radius-2xl); padding: var(--dn-space-64); box-shadow: var(--dn-shadow-lg); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_calculator__title { font-size: var(--dn-font-2xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-48); } .dn_calculator__comparison { display: grid; gap: var(--dn-space-48); margin-bottom: var(--dn-space-48); } @media (min-width: 900px) { .dn_calculator__comparison { grid-template-columns: repeat(2, 1fr); } } .dn_calculator__side-title { font-size: var(--dn-font-lg); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-24); } .dn_calculator__metrics { background: var(--dn-white); padding: var(--dn-space-32); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-sm); } .dn_calculator__side--current .dn_calculator__metrics { border-left: 4px solid var(--dn-accent); } .dn_calculator__side--ai .dn_calculator__metrics { background: #e8f5e9; border-left: 4px solid var(--dn-blue); } .dn_calculator__metrics p { margin-bottom: var(--dn-space-12); line-height: 1.5; color: var(--dn-gray-700); } .dn_calculator__metrics p:last-child { margin-bottom: 0; } .dn_calculator__metrics strong { color: var(--dn-primary); } .dn_calculator__metrics hr { border: none; border-top: 1px solid var(--dn-gray-200); margin: var(--dn-space-16) 0; } .dn_calculator__improvement { background: var(--dn-primary); color: var(--dn-white); padding: var(--dn-space-48); border-radius: var(--dn-radius-xl); text-align: center; } .dn_calculator__improvement-title { font-size: var(--dn-font-xl); font-weight: 700; margin-bottom: var(--dn-space-32); } .dn_calculator__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-space-32); } .dn_calculator__stat-number { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-blue); } .dn_calculator__stat-label { font-size: var(--dn-font-base); opacity: 0.9; } .dn_case-studies { padding: var(--dn-space-128) 0; background: var(--dn-gray-50); } .dn_case-studies-grid { display: grid; gap: var(--dn-space-48); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_case-studies-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_case-studies-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_case-studies-grid { grid-template-columns: repeat(3, 1fr); } } .dn_case-study { background: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-48); box-shadow: var(--dn-shadow-lg); border: 1px solid var(--dn-gray-200); transition: transform var(--dn-duration-normal) ease; } .dn_case-study:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_case-study__title { font-size: var(--dn-font-xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-24); } .dn_case-study__details { background: var(--dn-gray-50); padding: var(--dn-space-20); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-space-24); border-left: 4px solid var(--dn-blue); } .dn_case-study__details p { margin-bottom: var(--dn-space-8); color: var(--dn-gray-700); font-size: var(--dn-font-sm); } .dn_case-study__details p:last-child { margin-bottom: 0; } .dn_case-study__details strong { color: var(--dn-primary); } .dn_case-study__results-title { font-size: var(--dn-font-lg); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); } .dn_case-study__results { list-style: none; padding: 0; margin-bottom: var(--dn-space-24); } .dn_case-study__results li { margin-bottom: var(--dn-space-12); padding-left: var(--dn-space-20); position: relative; color: var(--dn-gray-700); line-height: 1.5; } .dn_case-study__results li::before { content: "•"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_case-study__outcome { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); padding: var(--dn-space-20); border-radius: var(--dn-radius-lg); text-align: center; border-left: 4px solid var(--dn-blue); } .dn_case-study__outcome p { margin: 0; color: var(--dn-primary); font-weight: 600; } .dn_faq { padding: var(--dn-space-128) 0; } .dn_faq-list { max-width: 900px; margin: 0 auto; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_faq-item { background: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-40); margin-bottom: var(--dn-space-24); box-shadow: var(--dn-shadow-md); border-left: 4px solid var(--dn-blue); transition: transform var(--dn-duration-normal) ease; } .dn_faq-item:hover { transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_faq-item:nth-child(even) { border-left-color: var(--dn-secondary); } .dn_faq-item__question { font-size: var(--dn-font-lg); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); } .dn_faq-item__answer { color: var(--dn-gray-700); line-height: 1.6; margin: 0; } .dn_final-cta { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; } .dn_final-cta__title { font-size: var(--dn-font-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-24); animation: dn_fadeInUp 0.8s ease-out; } .dn_final-cta__subtitle { font-size: var(--dn-font-lg); line-height: 1.5; margin-bottom: var(--dn-space-64); max-width: 800px; margin-left: auto; margin-right: auto; animation: dn_fadeInUp 0.8s ease-out 0.1s both; } .dn_audit-offer { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius-2xl); padding: var(--dn-space-64); margin-bottom: var(--dn-space-64); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_audit-offer__title { font-size: var(--dn-font-2xl); font-weight: 700; margin-bottom: var(--dn-space-16); } .dn_audit-offer__subtitle { font-size: var(--dn-font-lg); margin-bottom: var(--dn-space-32); opacity: 0.9; } .dn_audit-offer__features { list-style: none; padding: 0; margin-bottom: var(--dn-space-40); max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; } .dn_audit-offer__features li { margin-bottom: var(--dn-space-12); padding-left: var(--dn-space-24); position: relative; line-height: 1.5; } .dn_audit-offer__features li::before { content: "✔"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_audit-offer__note { margin-top: var(--dn-space-24); opacity: 0.8; font-size: var(--dn-font-base); } .dn_contact-info { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--dn-space-48); animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_contact-info__ready { font-size: var(--dn-font-lg); margin-bottom: var(--dn-space-16); opacity: 0.9; } .dn_contact-info__phone { font-size: var(--dn-font-2xl); font-weight: 700; color: var(--dn-blue); margin-bottom: var(--dn-space-16); } .dn_contact-info__message { font-size: var(--dn-font-base); opacity: 0.8; line-height: 1.5; max-width: 600px; margin: 0 auto; } @media (max-width: 599px) { .dn_hero__title { font-size: var(--dn-font-3xl); } .dn_hero__subtitle { font-size: var(--dn-font-lg); } .dn_final-cta__title { font-size: var(--dn-font-3xl); } .dn_service-card { grid-template-columns: 1fr; text-align: center; } .dn_calculator__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dn_container { padding: 0 var(--dn-space-16); } .dn_audit-offer__features { text-align: center; } } /* ========================================== AI Audit – Initial Law Firm Marketing ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-50: #f8fafc; --dn-gray-100: #f1f5f9; --dn-gray-200: #e2e8f0; --dn-gray-300: #cbd5e1; --dn-gray-600: #475569; --dn-gray-700: #334155; --dn-gray-800: #1e293b; --dn-gray-900: #0f172a; --dn-space-4: 0.25rem; --dn-space-8: 0.5rem; --dn-space-12: 0.75rem; --dn-space-16: 1rem; --dn-space-20: 1.25rem; --dn-space-24: 1.5rem; --dn-space-32: 2rem; --dn-space-40: 2.5rem; --dn-space-48: 3rem; --dn-space-64: 4rem; --dn-space-80: 5rem; --dn-space-96: 6rem; --dn-space-128: 8rem; --dn-radius-sm: 0.25rem; --dn-radius-md: 0.5rem; --dn-radius-lg: 0.75rem; --dn-radius-xl: 1rem; --dn-radius-2xl: 1.5rem; --dn-radius-btn: 14px; --dn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --dn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --dn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --dn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --dn-duration-fast: 0.15s; --dn-duration-normal: 0.25s; --dn-duration-slow: 0.4s; --dn-font-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --dn-font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --dn-font-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --dn-font-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --dn-font-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --dn-font-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --dn-font-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --dn-font-5xl: clamp(2.625rem, 2.25rem + 1.875vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; font-size: var(--dn-font-base); line-height: 1.6; color: var(--dn-black); background-color: var(--dn-white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .dn_competitive-analysis { min-height: 100vh; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-space-24); } @media (max-width: 768px) { .dn_container { padding: 0 var(--dn-space-16); } } .dn_visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .dn_section-title { font-size: var(--dn-font-3xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-48); line-height: 1.2; animation: dn_fadeInUp 0.8s ease-out; } .dn_section-title--white { color: var(--dn-white); } .dn_hero { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0 var(--dn-space-96); text-align: center; } .dn_hero__content { animation: dn_fadeInUp 0.8s ease-out; } .dn_hero__title { font-size: var(--dn-font-5xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-32); max-width: 900px; margin-left: auto; margin-right: auto; } .dn_hero__subtitle { font-size: var(--dn-font-xl); line-height: 1.4; opacity: 0.95; margin-bottom: var(--dn-space-48); max-width: 700px; margin-left: auto; margin-right: auto; } .dn_hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dn-space-24); } @media (max-width: 599px) { .dn_hero__buttons { flex-direction: column; align-items: center; } } .dn_btn { display: inline-block; padding: var(--dn-space-16) var(--dn-space-32); border-radius: var(--dn-radius-btn); text-decoration: none; font-weight: 600; font-size: var(--dn-font-base); border: none; cursor: pointer; transition: all var(--dn-duration-normal) ease; text-align: center; min-width: 200px; } .dn_btn--primary { background-color: var(--dn-blue); color: var(--dn-white); box-shadow: var(--dn-shadow-md); } .dn_btn--primary:hover { background-color: var(--dn-primary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--secondary { background-color: var(--dn-secondary); color: var(--dn-white); box-shadow: var(--dn-shadow-md); } .dn_btn--secondary:hover { background-color: var(--dn-blue); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--transparent { background-color: transparent; color: var(--dn-white); border: 2px solid var(--dn-white); } .dn_btn--transparent:hover { background-color: var(--dn-white); color: var(--dn-primary); transform: translateY(-2px); } .dn_btn--accent { background-color: var(--dn-accent); color: var(--dn-white); box-shadow: var(--dn-shadow-md); } .dn_btn--accent:hover { background-color: #c73d4a; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_stats { background-color: var(--dn-white); padding: var(--dn-space-80) 0; border-bottom: 1px solid var(--dn-gray-200); } .dn_stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-40); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_stats__item { text-align: center; padding: var(--dn-space-32); border-radius: var(--dn-radius-xl); background-color: var(--dn-gray-50); transition: transform var(--dn-duration-normal) ease; } .dn_stats__item:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_stats__number { font-size: var(--dn-font-4xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-12); } .dn_stats__label { font-size: var(--dn-font-base); color: var(--dn-gray-700); font-weight: 500; } .dn_alert { background-color: var(--dn-gray-50); padding: var(--dn-space-64) 0; } .dn_alert__banner { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); border-radius: var(--dn-radius-2xl); padding: var(--dn-space-32); box-shadow: var(--dn-shadow-xl); animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_alert__content { display: grid; grid-template-columns: auto 1fr auto; gap: var(--dn-space-24); align-items: center; } @media (max-width: 899px) { .dn_alert__content { grid-template-columns: 1fr; text-align: center; gap: var(--dn-space-20); } } .dn_alert__icon { width: 3rem; height: 3rem; background-color: var(--dn-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dn-blue); font-size: 1.5rem; font-weight: 700; } .dn_alert__icon::before { content: "🎯"; } .dn_alert__text { color: var(--dn-white); } .dn_alert__title { font-size: var(--dn-font-xl); font-weight: 700; margin-bottom: var(--dn-space-8); } .dn_alert__description { font-size: var(--dn-font-base); opacity: 0.95; } .dn_service { padding: var(--dn-space-96) 0; } .dn_service__card { background-color: var(--dn-white); border-radius: var(--dn-radius-2xl); padding: var(--dn-space-48); box-shadow: var(--dn-shadow-lg); border: 1px solid var(--dn-gray-200); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_service__text { font-size: var(--dn-font-lg); line-height: 1.7; margin-bottom: var(--dn-space-24); color: var(--dn-gray-800); } .dn_scope { background-color: var(--dn-gray-50); padding: var(--dn-space-96) 0; } .dn_scope__subtitle { font-size: var(--dn-font-lg); color: var(--dn-gray-600); text-align: center; margin-bottom: var(--dn-space-64); animation: dn_fadeInUp 0.8s ease-out 0.1s both; } .dn_scope__grid { display: grid; gap: var(--dn-space-32); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_scope__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_scope__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_scope__grid { grid-template-columns: repeat(3, 1fr); } } .dn_scope__card { background-color: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-32); box-shadow: var(--dn-shadow-md); border: 1px solid var(--dn-gray-200); transition: all var(--dn-duration-normal) ease; height: 100%; } .dn_scope__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } .dn_scope__icon { width: 4rem; height: 4rem; background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); border-radius: var(--dn-radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--dn-space-24); font-size: 1.5rem; } .dn_scope__icon::before { content: "📊"; } .dn_scope__card:nth-child(2) .dn_scope__icon::before { content: "📝"; } .dn_scope__card:nth-child(3) .dn_scope__icon::before { content: "📍"; } .dn_scope__card:nth-child(4) .dn_scope__icon::before { content: "🤖"; } .dn_scope__card:nth-child(5) .dn_scope__icon::before { content: "⚙️"; } .dn_scope__card:nth-child(6) .dn_scope__icon::before { content: "⭐"; } .dn_scope__card-title { font-size: var(--dn-font-xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); line-height: 1.3; } .dn_scope__card-description { font-size: var(--dn-font-base); line-height: 1.6; color: var(--dn-gray-700); } .dn_advanced { padding: var(--dn-space-96) 0; } .dn_advanced__grid { display: grid; gap: var(--dn-space-24); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_advanced__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_advanced__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_advanced__grid { grid-template-columns: repeat(3, 1fr); } } .dn_advanced__card { background-color: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-space-24); box-shadow: var(--dn-shadow-sm); border: 1px solid var(--dn-gray-200); transition: all var(--dn-duration-normal) ease; height: 100%; } .dn_advanced__card:hover { transform: translateY(-2px); box-shadow: var(--dn-shadow-md); border-color: var(--dn-blue); } .dn_advanced__title { font-size: var(--dn-font-lg); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-12); line-height: 1.3; } .dn_advanced__description { font-size: var(--dn-font-sm); line-height: 1.5; color: var(--dn-gray-700); } .dn_deliverables { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-96) 0; } .dn_deliverables__grid { display: grid; gap: var(--dn-space-32); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_deliverables__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_deliverables__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_deliverables__grid { grid-template-columns: repeat(3, 1fr); } } .dn_deliverables__card { background: rgba(255, 255, 255, 0.1); border-radius: var(--dn-radius-xl); padding: var(--dn-space-32); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform var(--dn-duration-normal) ease; height: 100%; } .dn_deliverables__card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_deliverables__title { font-size: var(--dn-font-xl); font-weight: 700; margin-bottom: var(--dn-space-20); color: var(--dn-white); } .dn_deliverables__list { list-style: none; } .dn_deliverables__list li { position: relative; padding-left: var(--dn-space-24); margin-bottom: var(--dn-space-12); line-height: 1.5; } .dn_deliverables__list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_strategy { padding: var(--dn-space-96) 0; } .dn_strategy__highlight { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); color: var(--dn-white); border-radius: var(--dn-radius-2xl); padding: var(--dn-space-64); text-align: center; box-shadow: var(--dn-shadow-xl); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_strategy__title { font-size: var(--dn-font-3xl); font-weight: 700; margin-bottom: var(--dn-space-32); color: var(--dn-white); } .dn_strategy__text { font-size: var(--dn-font-lg); line-height: 1.7; max-width: 800px; margin: 0 auto; opacity: 0.95; } .dn_cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; } .dn_cta__title { font-size: var(--dn-font-4xl); font-weight: 700; margin-bottom: var(--dn-space-24); line-height: 1.2; animation: dn_fadeInUp 0.8s ease-out; } .dn_cta__subtitle { font-size: var(--dn-font-xl); margin-bottom: var(--dn-space-48); opacity: 0.95; animation: dn_fadeInUp 0.8s ease-out 0.1s both; } .dn_cta__reality { background: rgba(255, 255, 255, 0.1); border-radius: var(--dn-radius-xl); padding: var(--dn-space-32); margin: var(--dn-space-48) auto; max-width: 800px; backdrop-filter: blur(10px); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_cta__reality-text { font-size: var(--dn-font-lg); line-height: 1.6; margin: 0; } .dn_cta__buttons { margin-top: var(--dn-space-48); animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_intelligence { padding: var(--dn-space-96) 0; background-color: var(--dn-gray-50); } .dn_intelligence__grid { display: grid; gap: var(--dn-space-32); animation: dn_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_intelligence__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_intelligence__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_intelligence__grid { grid-template-columns: repeat(3, 1fr); } } .dn_intelligence__card { background-color: var(--dn-white); border-radius: var(--dn-radius-xl); padding: var(--dn-space-32); box-shadow: var(--dn-shadow-md); border: 1px solid var(--dn-gray-200); transition: all var(--dn-duration-normal) ease; height: 100%; } .dn_intelligence__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_intelligence__title { font-size: var(--dn-font-xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); line-height: 1.3; } .dn_intelligence__text { font-size: var(--dn-font-base); line-height: 1.6; color: var(--dn-gray-700); } @media (max-width: 599px) { .dn_hero { padding: var(--dn-space-96) 0 var(--dn-space-64); } .dn_hero__title { font-size: var(--dn-font-3xl); } .dn_hero__subtitle { font-size: var(--dn-font-lg); } .dn_stats { padding: var(--dn-space-64) 0; } .dn_stats__grid { grid-template-columns: 1fr; gap: var(--dn-space-24); } .dn_service, .dn_scope, .dn_advanced, .dn_deliverables, .dn_strategy, .dn_intelligence { padding: var(--dn-space-64) 0; } .dn_cta { padding: var(--dn-space-80) 0; } } .dn_alert__description ,.dn_alert__title,.dn_deliverables__list ,.dn_strategy__text { color:#ffffff; } /* ========================================== AI-Powered SEO Services ========================================== */ /* Remove list bullets */ :root { --aiseo-primary: #194A9A; --aiseo-secondary: #2F62AD; --aiseo-blue: #348EDF; --aiseo-accent: #DF4756; --aiseo-dark: #011F4E; --aiseo-black: #000000; --aiseo-white: #ffffff; --aiseo-gray-50: #f8fafc; --aiseo-gray-100: #f1f5f9; --aiseo-gray-200: #e2e8f0; --aiseo-gray-300: #cbd5e1; --aiseo-gray-600: #475569; --aiseo-gray-700: #334155; --aiseo-gray-800: #1e293b; --aiseo-gray-900: #0f172a; --aiseo-space-4: 0.25rem; --aiseo-space-8: 0.5rem; --aiseo-space-12: 0.75rem; --aiseo-space-16: 1rem; --aiseo-space-20: 1.25rem; --aiseo-space-24: 1.5rem; --aiseo-space-32: 2rem; --aiseo-space-40: 2.5rem; --aiseo-space-48: 3rem; --aiseo-space-64: 4rem; --aiseo-space-80: 5rem; --aiseo-space-96: 6rem; --aiseo-space-128: 8rem; --aiseo-radius-sm: 0.25rem; --aiseo-radius-md: 0.5rem; --aiseo-radius-lg: 0.75rem; --aiseo-radius-xl: 1rem; --aiseo-radius-2xl: 1.5rem; --aiseo-radius-btn: 14px; --aiseo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --aiseo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --aiseo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --aiseo-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --aiseo-duration-fast: 0.15s; --aiseo-duration-normal: 0.25s; --aiseo-duration-slow: 0.4s; --aiseo-font-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --aiseo-font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --aiseo-font-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --aiseo-font-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --aiseo-font-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --aiseo-font-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --aiseo-font-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --aiseo-font-5xl: clamp(2.625rem, 2.25rem + 1.875vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; font-size: var(--aiseo-font-base); line-height: 1.6; color: var(--aiseo-black); background-color: var(--aiseo-white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes aiseo_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .aiseo_page { min-height: 100vh; } .aiseo_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--aiseo-space-20); } @media (max-width: 768px) { .aiseo_container { padding: 0 var(--aiseo-space-16); } } .aiseo_section-title { font-size: var(--aiseo-font-3xl); font-weight: 700; color: var(--aiseo-primary); text-align: center; margin-bottom: var(--aiseo-space-48); line-height: 1.2; animation: aiseo_fadeInUp 0.8s ease-out; } .aiseo_section-title--accent { color: var(--aiseo-accent); } .aiseo_section-subtitle { font-size: var(--aiseo-font-lg); color: var(--aiseo-blue); text-align: center; margin-bottom: var(--aiseo-space-64); animation: aiseo_fadeInUp 0.8s ease-out 0.1s both; } .aiseo_btn { display: inline-block; padding: var(--aiseo-space-16) var(--aiseo-space-32); border-radius: var(--aiseo-radius-btn); text-decoration: none; font-weight: 600; font-size: var(--aiseo-font-base); border: none; cursor: pointer; transition: all var(--aiseo-duration-normal) ease; text-align: center; box-shadow: var(--aiseo-shadow-md); } .aiseo_btn--primary { background-color: var(--aiseo-white); color: var(--aiseo-primary); } .aiseo_btn--primary:hover { background-color: var(--aiseo-blue); color: var(--aiseo-white); transform: translateY(-2px); box-shadow: var(--aiseo-shadow-lg); } .aiseo_btn--transparent { background-color: transparent; color: var(--aiseo-white); border: 2px solid var(--aiseo-white); } .aiseo_btn--transparent:hover { background-color: var(--aiseo-white); color: var(--aiseo-primary); transform: translateY(-2px); } .aiseo_btn--large { padding: var(--aiseo-space-20) var(--aiseo-space-40); font-size: var(--aiseo-font-lg); } .aiseo_btn:focus-visible { outline: 2px solid var(--aiseo-blue); outline-offset: 2px; } .aiseo_hero { background: linear-gradient(135deg, var(--aiseo-primary) 0%, var(--aiseo-blue) 100%); color: var(--aiseo-white); padding: var(--aiseo-space-128) 0; text-align: center; } .aiseo_hero__content { animation: aiseo_fadeInUp 0.8s ease-out; } .aiseo_hero__title { font-size: var(--aiseo-font-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--aiseo-space-20); } .aiseo_hero__subtitle { font-size: var(--aiseo-font-xl); font-weight: 300; opacity: 0.95; margin-bottom: var(--aiseo-space-40); } .aiseo_hero__stats { display: flex; justify-content: center; gap: var(--aiseo-space-40); flex-wrap: wrap; margin: var(--aiseo-space-64) 0; animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } .aiseo_stat-card { background: rgba(255, 255, 255, 0.1); padding: var(--aiseo-space-24); border-radius: var(--aiseo-radius-xl); backdrop-filter: blur(10px); min-width: 150px; transition: transform var(--aiseo-duration-normal) ease; } .aiseo_stat-card:hover { transform: translateY(-4px); } .aiseo_stat-card__number { font-size: var(--aiseo-font-3xl); font-weight: 700; margin: 0; color: #ffd54f; } .aiseo_stat-card__label { font-size: var(--aiseo-font-sm); margin: var(--aiseo-space-8) 0 0 0; opacity: 0.9; } .aiseo_hero__cta { margin-top: var(--aiseo-space-64); animation: aiseo_fadeInUp 0.8s ease-out 0.3s both; } .aiseo_problem { padding: var(--aiseo-space-128) 0; } .aiseo_problem__grid { display: grid; gap: var(--aiseo-space-32); margin-bottom: var(--aiseo-space-64); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .aiseo_problem__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .aiseo_problem__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .aiseo_problem__grid { grid-template-columns: repeat(2, 1fr); } } .aiseo_problem__card { background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%); padding: var(--aiseo-space-40); border-radius: var(--aiseo-radius-xl); border-top: 4px solid var(--aiseo-accent); box-shadow: 0 8px 25px rgba(223, 71, 86, 0.15); transition: transform var(--aiseo-duration-normal) ease; } .aiseo_problem__card:hover { transform: translateY(-4px); } .aiseo_problem__card-title { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-20); font-size: var(--aiseo-font-xl); font-weight: 600; } .aiseo_problem__card-text { color: var(--aiseo-gray-600); line-height: 1.7; margin: 0; font-size: var(--aiseo-font-base); } .aiseo_problem__reality { background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%); border-left: 5px solid var(--aiseo-blue); padding: var(--aiseo-space-48); border-radius: var(--aiseo-radius-xl); box-shadow: var(--aiseo-shadow-lg); animation: aiseo_fadeInUp 0.8s ease-out 0.4s both; } .aiseo_problem__reality-title { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-20); font-size: var(--aiseo-font-xl); font-weight: 600; } .aiseo_problem__reality-text { font-size: var(--aiseo-font-lg); line-height: 1.7; margin: 0; color: var(--aiseo-gray-600); } .aiseo_solution { background: linear-gradient(135deg, var(--aiseo-gray-50) 0%, #e2e8f0 100%); padding: var(--aiseo-space-128) 0; } .aiseo_solution__intro { background: var(--aiseo-white); padding: var(--aiseo-space-64); border-radius: var(--aiseo-radius-xl); margin-bottom: var(--aiseo-space-64); box-shadow: var(--aiseo-shadow-lg); border-top: 4px solid var(--aiseo-primary); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } .aiseo_solution__intro-title { color: var(--aiseo-primary); font-size: var(--aiseo-font-2xl); margin-bottom: var(--aiseo-space-32); font-weight: 600; } .aiseo_solution__intro-text { font-size: var(--aiseo-font-lg); line-height: 1.7; margin-bottom: var(--aiseo-space-48); color: var(--aiseo-gray-600); } .aiseo_solution__layers { display: grid; gap: var(--aiseo-space-64); } @media (min-width: 900px) { .aiseo_solution__layers { grid-template-columns: repeat(2, 1fr); } } .aiseo_solution__layer-title { color: var(--aiseo-secondary); font-size: var(--aiseo-font-xl); margin-bottom: var(--aiseo-space-24); font-weight: 600; } .aiseo_solution__layer-description { margin-bottom: var(--aiseo-space-20); color: var(--aiseo-gray-600); font-size: var(--aiseo-font-base); } .aiseo_solution__layer-list { line-height: 1.8; padding-left: 0; list-style: none; margin-bottom: var(--aiseo-space-24); } .aiseo_solution__layer-list li { margin-bottom: var(--aiseo-space-12); padding-left: var(--aiseo-space-24); position: relative; color: var(--aiseo-gray-600); } .aiseo_solution__layer-list li::before { content: "✓"; position: absolute; left: 0; color: var(--aiseo-accent); } .aiseo_solution__layer-note { padding: var(--aiseo-space-20); background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-radius: var(--aiseo-radius-xl); border-left: 4px solid var(--aiseo-blue); color: var(--aiseo-primary); font-weight: 600; margin: 0; } .aiseo_solution__layer-note--secondary { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-left-color: var(--aiseo-secondary); } .aiseo_service { background: var(--aiseo-white); padding: var(--aiseo-space-64); margin-bottom: var(--aiseo-space-48); border-radius: var(--aiseo-radius-xl); box-shadow: var(--aiseo-shadow-lg); border-top: 4px solid var(--aiseo-primary); animation: aiseo_fadeInUp 0.8s ease-out 0.4s both; } .aiseo_service--secondary { border-top-color: var(--aiseo-secondary); } .aiseo_service--blue { border-top-color: var(--aiseo-blue); } .aiseo_service__title { color: var(--aiseo-primary); font-size: var(--aiseo-font-2xl); margin-bottom: var(--aiseo-space-32); font-weight: 600; } .aiseo_service--secondary .aiseo_service__title { color: var(--aiseo-secondary); } .aiseo_service--blue .aiseo_service__title { color: var(--aiseo-blue); } .aiseo_service__grid { display: grid; gap: var(--aiseo-space-48); margin-bottom: var(--aiseo-space-32); } @media (min-width: 900px) { .aiseo_service__grid { grid-template-columns: repeat(3, 1fr); } } .aiseo_service__component-title { color: var(--aiseo-secondary); margin-bottom: var(--aiseo-space-20); font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_service--secondary .aiseo_service__component-title { color: var(--aiseo-primary); } .aiseo_service--blue .aiseo_service__component-title { color: var(--aiseo-primary); } .aiseo_service__component-list { line-height: 1.8; padding-left: 0; list-style: none; } .aiseo_service__component-list li { margin-bottom: var(--aiseo-space-8); padding-left: var(--aiseo-space-20); position: relative; color: var(--aiseo-gray-600); } .aiseo_service__component-list li::before { content: "•"; position: absolute; left: 0; color: var(--aiseo-accent); } .aiseo_service__result { padding: var(--aiseo-space-24); background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-radius: var(--aiseo-radius-xl); border-left: 4px solid var(--aiseo-blue); } .aiseo_service__result--secondary { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-left-color: var(--aiseo-secondary); } .aiseo_service__result--blue { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); border-left-color: var(--aiseo-blue); } .aiseo_service__result p { margin: 0; font-weight: 600; color: var(--aiseo-primary); } .aiseo_pricing { padding: var(--aiseo-space-128) 0; } .aiseo_pricing__grid { display: grid; gap: var(--aiseo-space-32); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .aiseo_pricing__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .aiseo_pricing__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .aiseo_pricing__grid { grid-template-columns: repeat(3, 1fr); } } .aiseo_pricing__card { background: var(--aiseo-white); border-radius: var(--aiseo-radius-xl); overflow: hidden; box-shadow: var(--aiseo-shadow-lg); transition: transform var(--aiseo-duration-normal) ease; } .aiseo_pricing__card:hover { transform: translateY(-4px); box-shadow: var(--aiseo-shadow-xl); } .aiseo_pricing__card--secondary { border: 2px solid var(--aiseo-secondary); } .aiseo_pricing__card--blue { border: 2px solid var(--aiseo-blue); } .aiseo_pricing__card--accent { border: 2px solid var(--aiseo-accent); } .aiseo_pricing__card-header { color: var(--aiseo-white); padding: var(--aiseo-space-32); text-align: center; } .aiseo_pricing__card--secondary .aiseo_pricing__card-header { background: linear-gradient(135deg, var(--aiseo-secondary) 0%, var(--aiseo-blue) 100%); } .aiseo_pricing__card--blue .aiseo_pricing__card-header { background: linear-gradient(135deg, var(--aiseo-blue) 0%, var(--aiseo-primary) 100%); } .aiseo_pricing__card--accent .aiseo_pricing__card-header { background: linear-gradient(135deg, var(--aiseo-accent) 0%, var(--aiseo-dark) 100%); } .aiseo_pricing__card-title { margin: 0; font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_pricing__card-subtitle { margin: var(--aiseo-space-12) 0 0 0; opacity: 0.9; font-size: var(--aiseo-font-sm); } .aiseo_pricing__card-body { padding: var(--aiseo-space-48); } .aiseo_pricing__card-price { font-size: var(--aiseo-font-3xl); font-weight: 700; text-align: center; margin: var(--aiseo-space-24) 0; color: var(--aiseo-primary); } .aiseo_pricing__card-period { font-size: var(--aiseo-font-base); color: var(--aiseo-gray-600); font-weight: 400; } .aiseo_pricing__card-features-title { color: var(--aiseo-secondary); margin: var(--aiseo-space-32) 0 var(--aiseo-space-20); font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_pricing__card--blue .aiseo_pricing__card-features-title { color: var(--aiseo-blue); } .aiseo_pricing__card--accent .aiseo_pricing__card-features-title { color: var(--aiseo-accent); } .aiseo_pricing__card-features { line-height: 1.8; margin-bottom: var(--aiseo-space-32); padding-left: 0; list-style: none; } .aiseo_pricing__card-features li { margin-bottom: var(--aiseo-space-8); padding-left: var(--aiseo-space-20); position: relative; color: var(--aiseo-gray-600); } .aiseo_pricing__card-features li::before { content: "✓"; position: absolute; left: 0; color: var(--aiseo-accent); } .aiseo_pricing__card-case-study { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); padding: var(--aiseo-space-24); border-radius: var(--aiseo-radius-xl); border-left: 4px solid var(--aiseo-secondary); } .aiseo_pricing__card-case-study--blue { background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%); border-left-color: var(--aiseo-blue); } .aiseo_pricing__card-case-study--accent { background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%); border-left-color: var(--aiseo-accent); } .aiseo_pricing__card-case-study-title { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-16); font-size: var(--aiseo-font-sm); font-weight: 600; } .aiseo_pricing__card-case-study-text { margin: 0; color: var(--aiseo-gray-600); font-size: var(--aiseo-font-sm); } .aiseo_pricing__card-case-study-text strong { color: var(--aiseo-primary); } .aiseo_audit { background: linear-gradient(135deg, var(--aiseo-gray-50) 0%, #e2e8f0 100%); padding: var(--aiseo-space-128) 0; } .aiseo_audit__card { background: var(--aiseo-white); padding: var(--aiseo-space-64); border-radius: var(--aiseo-radius-xl); box-shadow: var(--aiseo-shadow-lg); border-top: 4px solid var(--aiseo-primary); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } .aiseo_audit__card-title { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-48); font-size: var(--aiseo-font-xl); font-weight: 600; } .aiseo_audit__checklist { margin-bottom: var(--aiseo-space-32); } .aiseo_audit__item { display: flex; align-items: center; padding: var(--aiseo-space-20); background: var(--aiseo-gray-50); border-radius: var(--aiseo-radius-xl); margin-bottom: var(--aiseo-space-16); cursor: pointer; border: 1px solid var(--aiseo-gray-200); transition: all var(--aiseo-duration-normal) ease; } .aiseo_audit__item:hover { border-color: var(--aiseo-blue); background: #f0f9ff; } .aiseo_audit__checkbox { margin-right: var(--aiseo-space-20); transform: scale(1.5); accent-color: var(--aiseo-primary); } .aiseo_audit__text { font-size: var(--aiseo-font-base); color: var(--aiseo-gray-600); } .aiseo_audit__cta { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); padding: var(--aiseo-space-40); border-radius: var(--aiseo-radius-xl); text-align: center; border-left: 4px solid var(--aiseo-blue); } .aiseo_audit__cta-title { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-20); font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_audit__cta-text { margin-bottom: var(--aiseo-space-24); color: var(--aiseo-gray-600); font-size: var(--aiseo-font-base); } .aiseo_timeline { padding: var(--aiseo-space-128) 0; } .aiseo_timeline__grid { display: grid; gap: var(--aiseo-space-40); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .aiseo_timeline__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .aiseo_timeline__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .aiseo_timeline__grid { grid-template-columns: repeat(2, 1fr); } } .aiseo_timeline__card { background: var(--aiseo-white); padding: var(--aiseo-space-40); box-shadow: var(--aiseo-shadow-lg); border-radius: var(--aiseo-radius-xl); transition: transform var(--aiseo-duration-normal) ease; } .aiseo_timeline__card:hover { transform: translateY(-4px); } .aiseo_timeline__card--primary { border-left: 5px solid var(--aiseo-primary); } .aiseo_timeline__card--secondary { border-left: 5px solid var(--aiseo-secondary); } .aiseo_timeline__card--blue { border-left: 5px solid var(--aiseo-blue); } .aiseo_timeline__card--accent { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); border-left: 5px solid var(--aiseo-accent); } .aiseo_timeline__header { text-align: center; margin-bottom: var(--aiseo-space-24); } .aiseo_timeline__title { margin: 0; font-size: var(--aiseo-font-xl); font-weight: 600; } .aiseo_timeline__card--primary .aiseo_timeline__title { color: var(--aiseo-primary); } .aiseo_timeline__card--secondary .aiseo_timeline__title { color: var(--aiseo-secondary); } .aiseo_timeline__card--blue .aiseo_timeline__title { color: var(--aiseo-blue); } .aiseo_timeline__card--accent .aiseo_timeline__title { color: var(--aiseo-primary); } .aiseo_timeline__phase { color: var(--aiseo-blue); margin: var(--aiseo-space-4) 0 0 0; font-size: var(--aiseo-font-sm); font-weight: 500; } .aiseo_timeline__card--accent .aiseo_timeline__phase { color: var(--aiseo-accent); } .aiseo_timeline__section-title { margin-bottom: var(--aiseo-space-20); color: var(--aiseo-secondary); font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_timeline__card--secondary .aiseo_timeline__section-title, .aiseo_timeline__card--blue .aiseo_timeline__section-title, .aiseo_timeline__card--accent .aiseo_timeline__section-title { color: var(--aiseo-primary); } .aiseo_timeline__list { line-height: 1.8; padding-left: 0; list-style: none; margin-bottom: var(--aiseo-space-24); } .aiseo_timeline__list li { margin-bottom: var(--aiseo-space-12); padding-left: var(--aiseo-space-20); position: relative; color: var(--aiseo-gray-600); } .aiseo_timeline__list li::before { content: "•"; position: absolute; left: 0; color: var(--aiseo-accent); } .aiseo_timeline__expectation { margin: 0; font-weight: 600; text-align: center; background: #e3f2fd; padding: var(--aiseo-space-16); border-radius: var(--aiseo-radius-md); } .aiseo_timeline__expectation--primary { color: var(--aiseo-primary); } .aiseo_timeline__expectation--secondary { color: var(--aiseo-secondary); background: #e8f5e9; } .aiseo_timeline__expectation--blue { color: var(--aiseo-blue); background: #fff3e0; } .aiseo_timeline__expectation--accent { color: var(--aiseo-primary); background: rgba(255, 255, 255, 0.8); } .aiseo_faq { background: linear-gradient(135deg, var(--aiseo-gray-50) 0%, #e2e8f0 100%); padding: var(--aiseo-space-128) 0; } .aiseo_faq__list { max-width: 900px; margin: 0 auto; animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } .aiseo_faq__item { background: var(--aiseo-white); padding: var(--aiseo-space-40); margin-bottom: var(--aiseo-space-24); border-radius: var(--aiseo-radius-xl); box-shadow: var(--aiseo-shadow-md); transition: transform var(--aiseo-duration-normal) ease; } .aiseo_faq__item:hover { transform: translateY(-2px); box-shadow: var(--aiseo-shadow-lg); } .aiseo_faq__item--primary { border-left: 4px solid var(--aiseo-primary); } .aiseo_faq__item--secondary { border-left: 4px solid var(--aiseo-secondary); } .aiseo_faq__item--blue { border-left: 4px solid var(--aiseo-blue); } .aiseo_faq__item--accent { border-left: 4px solid var(--aiseo-accent); } .aiseo_faq__item--dark { border-left: 4px solid var(--aiseo-dark); } .aiseo_faq__question { color: var(--aiseo-primary); margin-bottom: var(--aiseo-space-20); font-size: var(--aiseo-font-lg); font-weight: 600; } .aiseo_faq__answer { line-height: 1.7; color: var(--aiseo-gray-600); margin: 0; font-size: var(--aiseo-font-base); } .aiseo_cta { background: linear-gradient(135deg, var(--aiseo-primary) 0%, var(--aiseo-blue) 100%); color: var(--aiseo-white); padding: var(--aiseo-space-128) 0; text-align: center; } .aiseo_cta__content { max-width: 800px; margin: 0 auto; animation: aiseo_fadeInUp 0.8s ease-out; } .aiseo_cta__title { font-size: var(--aiseo-font-4xl); margin-bottom: var(--aiseo-space-24); font-weight: 700; line-height: 1.2; } .aiseo_cta__subtitle { font-size: var(--aiseo-font-lg); margin-bottom: var(--aiseo-space-48); opacity: 0.95; font-weight: 300; } .aiseo_cta__buttons { display: flex; gap: var(--aiseo-space-20); justify-content: center; flex-wrap: wrap; margin-bottom: var(--aiseo-space-48); animation: aiseo_fadeInUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .aiseo_cta__buttons { flex-direction: column; align-items: center; } } .aiseo_cta__features { display: flex; justify-content: center; gap: var(--aiseo-space-32); flex-wrap: wrap; opacity: 0.9; animation: aiseo_fadeInUp 0.8s ease-out 0.3s both; } @media (max-width: 599px) { .aiseo_cta__features { flex-direction: column; align-items: center; gap: var(--aiseo-space-16); } } .aiseo_cta__feature { font-size: var(--aiseo-font-sm); display: flex; align-items: center; gap: var(--aiseo-space-8); } @media (max-width: 599px) { .aiseo_hero__stats { grid-template-columns: 1fr; } .aiseo_problem__grid { grid-template-columns: 1fr; } .aiseo_solution__layers { grid-template-columns: 1fr; } .aiseo_service__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .aiseo_hero__title { font-size: var(--aiseo-font-3xl); } .aiseo_hero__subtitle { font-size: var(--aiseo-font-lg); } .aiseo_cta__title { font-size: var(--aiseo-font-3xl); } } /* ========================================== AI PPC Management ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-50: #f8fafc; --dn-gray-100: #f1f5f9; --dn-gray-200: #e2e8f0; --dn-gray-600: #475569; --dn-gray-700: #334155; --dn-space-4: 0.25rem; --dn-space-8: 0.5rem; --dn-space-12: 0.75rem; --dn-space-16: 1rem; --dn-space-20: 1.25rem; --dn-space-24: 1.5rem; --dn-space-32: 2rem; --dn-space-40: 2.5rem; --dn-space-48: 3rem; --dn-space-64: 4rem; --dn-space-80: 5rem; --dn-space-96: 6rem; --dn-space-128: 8rem; --dn-radius-btn: 14px; --dn-radius-card: 1rem; --dn-radius-large: 1.5rem; --dn-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1); --dn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --dn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --dn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); --dn-duration: 0.25s; --dn-text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --dn-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --dn-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --dn-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --dn-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --dn-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --dn-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: var(--dn-text-base); line-height: 1.6; color: var(--dn-black); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .dn_ppc-main { min-height: 100vh; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-space-20); } .dn_title { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-48); line-height: 1.2; animation: dn_fadeUp 0.8s ease-out; } .dn_title--white { color: var(--dn-white); } .dn_subtitle { font-size: var(--dn-text-lg); color: var(--dn-gray-600); text-align: center; margin-bottom: var(--dn-space-64); max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; animation: dn_fadeUp 0.8s ease-out 0.2s both; } .dn_btn { display: inline-block; padding: var(--dn-space-16) var(--dn-space-32); border-radius: var(--dn-radius-btn); text-decoration: none; font-weight: 600; font-size: var(--dn-text-base); border: none; cursor: pointer; transition: all var(--dn-duration) ease; text-align: center; box-shadow: var(--dn-shadow-md); } .dn_btn--primary { background-color: var(--dn-primary); color: var(--dn-white); } .dn_btn--primary:hover { background-color: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--blue { background-color: var(--dn-blue); color: var(--dn-white); } .dn_btn--blue:hover { background-color: var(--dn-primary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--accent { background-color: var(--dn-accent); color: var(--dn-white); } .dn_btn--accent:hover { background-color: #c73d4a; transform: translateY(-2px); box-shadow: var(--dn-shadow-xl); } .dn_btn--large { padding: var(--dn-space-20) var(--dn-space-48); font-size: var(--dn-text-lg); } .dn_btn:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_hero { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; } .dn_hero__content { animation: dn_fadeUp 0.8s ease-out; } .dn_hero__title { font-size: var(--dn-text-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-24); } .dn_hero__subtitle { font-size: var(--dn-text-xl); line-height: 1.4; margin-bottom: var(--dn-space-48); max-width: 800px; margin-left: auto; margin-right: auto; } .dn_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-space-32); max-width: 900px; margin: var(--dn-space-64) auto 0; animation: dn_fadeUp 0.8s ease-out 0.3s both; } .dn_stats__item { text-align: center; padding: var(--dn-space-20); background: rgba(255, 255, 255, 0.1); border-radius: var(--dn-radius-card); transition: transform var(--dn-duration); } .dn_stats__item:hover { transform: translateY(-4px); } .dn_stats__number { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-blue); } .dn_stats__label { margin-top: var(--dn-space-8); font-size: var(--dn-text-base); } .dn_problems { background: var(--dn-gray-50); padding: var(--dn-space-128) 0; } .dn_cards { display: grid; gap: var(--dn-space-32); margin-bottom: var(--dn-space-64); animation: dn_fadeUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_cards { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_cards { grid-template-columns: repeat(3, 1fr); } } .dn_cards__item { background: var(--dn-white); padding: var(--dn-space-40); border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-lg); border-left: 4px solid var(--dn-accent); transition: transform var(--dn-duration); } .dn_cards__item:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_cards__title { color: var(--dn-accent); margin-bottom: var(--dn-space-20); font-size: var(--dn-text-xl); font-weight: 700; } .dn_cards__text { line-height: 1.6; color: var(--dn-black); } .dn_cards__text strong { color: var(--dn-primary); } .dn_callout { background: linear-gradient(135deg, rgba(52, 142, 223, 0.1), rgba(52, 142, 223, 0.05)); padding: var(--dn-space-32); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius-card); animation: dn_fadeUp 0.8s ease-out 0.4s both; } .dn_callout__title { margin-bottom: var(--dn-space-16); color: var(--dn-primary); font-size: var(--dn-text-lg); font-weight: 700; } .dn_callout__text { line-height: 1.6; color: var(--dn-black); margin: 0; } .dn_solution { padding: var(--dn-space-128) 0; } .dn_feature { margin-bottom: var(--dn-space-96); padding: var(--dn-space-64); background: linear-gradient(135deg, rgba(25, 74, 154, 0.02), rgba(52, 142, 223, 0.02)); border-radius: var(--dn-radius-large); border: 1px solid rgba(52, 142, 223, 0.1); animation: dn_fadeUp 0.8s ease-out; } .dn_feature--alt { background: linear-gradient(135deg, rgba(47, 98, 173, 0.02), rgba(25, 74, 154, 0.02)); border: 1px solid rgba(47, 98, 173, 0.1); } .dn_feature--blue { background: linear-gradient(135deg, rgba(52, 142, 223, 0.02), rgba(47, 98, 173, 0.02)); border: 1px solid rgba(52, 142, 223, 0.1); } .dn_feature--dark { background: linear-gradient(135deg, rgba(1, 31, 78, 0.02), rgba(25, 74, 154, 0.02)); border: 1px solid rgba(1, 31, 78, 0.1); } .dn_feature__header { display: flex; align-items: center; margin-bottom: var(--dn-space-32); flex-wrap: wrap; } .dn_feature__icon { font-size: 2.5rem; margin-right: var(--dn-space-20); } .dn_feature__title { font-size: var(--dn-text-2xl); color: var(--dn-primary); font-weight: 700; margin: 0; } .dn_feature__body { display: grid; gap: var(--dn-space-48); align-items: center; margin-bottom: var(--dn-space-32); } @media (min-width: 900px) { .dn_feature__body { grid-template-columns: repeat(2, 1fr); } } .dn_feature__heading { margin-bottom: var(--dn-space-20); color: var(--dn-primary); font-size: var(--dn-text-lg); font-weight: 700; } .dn_list { list-style: none; padding: 0; line-height: 1.8; } .dn_list li { margin-bottom: var(--dn-space-12); padding-left: var(--dn-space-20); position: relative; color: var(--dn-black); } .dn_list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_metrics { background: var(--dn-primary); color: var(--dn-white); padding: var(--dn-space-32); border-radius: var(--dn-radius-card); } .dn_metrics--alt { background: var(--dn-secondary); } .dn_metrics--blue { background: var(--dn-blue); } .dn_metrics--dark { background: var(--dn-dark); } .dn_metrics__title { margin-bottom: var(--dn-space-20); font-size: var(--dn-text-lg); font-weight: 700; } .dn_metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dn-space-20); } .dn_metrics__item { text-align: center; } .dn_metrics__number { font-size: var(--dn-text-xl); font-weight: 700; color: var(--dn-blue); } .dn_metrics--alt .dn_metrics__number, .dn_metrics--blue .dn_metrics__number, .dn_metrics--dark .dn_metrics__number { color: var(--dn-white); } .dn_metrics__label { font-size: var(--dn-text-sm); opacity: 0.9; } .dn_case-study { background: #e8f5e9; padding: var(--dn-space-24); border-radius: var(--dn-radius-card); border-left: 4px solid var(--dn-blue); } .dn_case-study p { margin: 0; line-height: 1.6; color: var(--dn-black); } .dn_case-study strong { color: var(--dn-primary); } .dn_comparison { background: var(--dn-primary); color: var(--dn-white); padding: var(--dn-space-128) 0; } .dn_versus { display: grid; gap: var(--dn-space-64); animation: dn_fadeUp 0.8s ease-out 0.2s both; } @media (min-width: 900px) { .dn_versus { grid-template-columns: repeat(2, 1fr); } } .dn_versus__title { margin-bottom: var(--dn-space-24); font-size: var(--dn-text-xl); font-weight: 700; display: flex; align-items: center; } .dn_versus__side--negative .dn_versus__title { color: var(--dn-accent); } .dn_versus__side--positive .dn_versus__title { color: var(--dn-blue); } .dn_versus__icon { margin-right: var(--dn-space-12); font-size: 1.25rem; } .dn_versus__list { list-style: none; padding: 0; line-height: 1.8; } .dn_versus__list li { margin-bottom: var(--dn-space-16); opacity: 0.9; padding-left: var(--dn-space-20); position: relative; } .dn_versus__list li::before { content: "•"; position: absolute; left: 0; color: var(--dn-accent); } .dn_versus__side--positive .dn_versus__list li::before { color: var(--dn-blue); } .dn_summary { background: rgba(255, 255, 255, 0.1); padding: var(--dn-space-32); border-radius: var(--dn-radius-card); text-align: center; backdrop-filter: blur(10px); animation: dn_fadeUp 0.8s ease-out 0.4s both; } .dn_summary p { font-size: var(--dn-text-lg); margin: 0; line-height: 1.5; } .dn_performance { background: var(--dn-gray-50); padding: var(--dn-space-128) 0; } .dn_table-wrap { overflow-x: auto; margin-bottom: var(--dn-space-48); animation: dn_fadeUp 0.8s ease-out 0.2s both; } .dn_table { width: 100%; background: var(--dn-white); border-radius: var(--dn-radius-card); overflow: hidden; box-shadow: var(--dn-shadow-lg); min-width: 800px; } .dn_table thead tr { background: var(--dn-primary); color: var(--dn-white); } .dn_table th, .dn_table td { padding: var(--dn-space-20) var(--dn-space-16); text-align: left; font-weight: 700; font-size: var(--dn-text-base); } .dn_table th:not(:first-child), .dn_table td:not(:first-child) { text-align: center; } .dn_table tbody tr { border-bottom: 1px solid var(--dn-gray-200); } .dn_table tbody tr:last-child { border-bottom: none; } .dn_table tbody td { font-weight: 400; color: var(--dn-black); } .dn_table tbody td:first-child { font-weight: 700; color: var(--dn-primary); } .dn_table__highlight { color: var(--dn-blue); font-weight: 700; font-size: var(--dn-text-lg); } .dn_highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-space-24); animation: dn_fadeUp 0.8s ease-out 0.4s both; } .dn_highlights__item { background: var(--dn-white); padding: var(--dn-space-32); border-radius: var(--dn-radius-card); text-align: center; box-shadow: var(--dn-shadow-md); transition: transform var(--dn-duration); } .dn_highlights__item:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_highlights__number { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-primary); } .dn_highlights__label { color: var(--dn-gray-600); margin-top: var(--dn-space-8); } .dn_process { padding: var(--dn-space-128) 0; } .dn_steps { display: grid; gap: var(--dn-space-48); animation: dn_fadeUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_steps { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_steps { grid-template-columns: repeat(2, 1fr); } } .dn_steps__item { text-align: center; } .dn_steps__number { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--dn-text-3xl); font-weight: 700; margin: 0 auto var(--dn-space-24); color: var(--dn-white); box-shadow: var(--dn-shadow-lg); } .dn_steps__number--primary { background: var(--dn-primary); } .dn_steps__number--secondary { background: var(--dn-secondary); } .dn_steps__number--blue { background: var(--dn-blue); } .dn_steps__number--dark { background: var(--dn-dark); } .dn_steps__title { margin-bottom: var(--dn-space-20); color: var(--dn-primary); font-size: var(--dn-text-xl); font-weight: 700; } .dn_steps__text { line-height: 1.6; color: var(--dn-black); } .dn_pricing { background: var(--dn-gray-50); padding: var(--dn-space-128) 0; } .dn_plans { display: grid; gap: var(--dn-space-32); margin-bottom: var(--dn-space-64); animation: dn_fadeUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_plans { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_plans { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_plans { grid-template-columns: repeat(3, 1fr); } } .dn_plans__item { border: 2px solid var(--dn-gray-200); border-radius: var(--dn-radius-large); padding: var(--dn-space-48); text-align: center; background: var(--dn-white); box-shadow: var(--dn-shadow-md); transition: all var(--dn-duration); position: relative; } .dn_plans__item:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_plans__item--featured { border-color: var(--dn-blue); transform: scale(1.05); } .dn_plans__item--featured:hover { transform: scale(1.05) translateY(-4px); } .dn_plans__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--dn-blue); color: var(--dn-white); padding: var(--dn-space-8) var(--dn-space-24); border-radius: var(--dn-radius-large); font-size: var(--dn-text-sm); font-weight: 700; } .dn_plans__name { font-size: var(--dn-text-2xl); margin-bottom: var(--dn-space-16); color: var(--dn-primary); font-weight: 700; } .dn_plans__price { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-primary); margin: var(--dn-space-24) 0; } .dn_plans__period { font-size: var(--dn-text-lg); font-weight: 400; color: var(--dn-gray-600); } .dn_plans__minimum { color: var(--dn-gray-600); margin-bottom: var(--dn-space-16); font-size: var(--dn-text-base); } .dn_plans__tagline { color: var(--dn-blue); margin-bottom: var(--dn-space-40); font-weight: 600; } .dn_plans__features { list-style: none; padding: 0; text-align: left; margin-bottom: var(--dn-space-40); } .dn_plans__features li { margin-bottom: var(--dn-space-12); padding-left: var(--dn-space-20); position: relative; color: var(--dn-black); line-height: 1.5; } .dn_plans__features li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_guarantee { background: var(--dn-blue); color: var(--dn-white); padding: var(--dn-space-24); border-radius: var(--dn-radius-card); text-align: center; animation: dn_fadeUp 0.8s ease-out 0.4s both; } .dn_guarantee__title { font-size: var(--dn-text-lg); font-weight: 700; margin-bottom: var(--dn-space-12); } .dn_guarantee__text { margin: 0; line-height: 1.5; } .dn_calculator { padding: var(--dn-space-128) 0; } .dn_calc { background: linear-gradient(135deg, var(--dn-gray-50), var(--dn-white)); padding: var(--dn-space-64); border-radius: var(--dn-radius-large); box-shadow: var(--dn-shadow-lg); animation: dn_fadeUp 0.8s ease-out 0.2s both; } .dn_calc__comparison { display: grid; gap: var(--dn-space-48); margin-bottom: var(--dn-space-48); } @media (min-width: 900px) { .dn_calc__comparison { grid-template-columns: repeat(2, 1fr); } } .dn_calc__heading { margin-bottom: var(--dn-space-24); color: var(--dn-primary); font-size: var(--dn-text-xl); font-weight: 700; } .dn_calc__box { background: var(--dn-white); padding: var(--dn-space-24); border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-sm); } .dn_calc__box--current { border-left: 4px solid var(--dn-accent); } .dn_calc__box--improved { background: #e8f5e9; border-left: 4px solid var(--dn-blue); } .dn_calc__box p { margin-bottom: var(--dn-space-16); line-height: 1.5; color: var(--dn-black); } .dn_calc__box p:last-child { margin-bottom: 0; } .dn_calc__box strong { color: var(--dn-primary); } .dn_calc__results { background: var(--dn-primary); color: var(--dn-white); padding: var(--dn-space-40); border-radius: var(--dn-radius-card); text-align: center; } .dn_calc__results-title { margin-bottom: var(--dn-space-32); font-size: var(--dn-text-xl); font-weight: 700; } .dn_calc__results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-space-24); } .dn_calc__result-number { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-blue); } .dn_calc__result-label { font-size: var(--dn-text-base); } .dn_faq { background: var(--dn-gray-50); padding: var(--dn-space-128) 0; } .dn_questions { max-width: 900px; margin: 0 auto; animation: dn_fadeUp 0.8s ease-out 0.2s both; } .dn_questions__item { background: var(--dn-white); border-radius: var(--dn-radius-card); padding: var(--dn-space-40); margin-bottom: var(--dn-space-24); box-shadow: var(--dn-shadow-md); border-left: 4px solid var(--dn-blue); transition: transform var(--dn-duration); } .dn_questions__item:hover { transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_questions__item:nth-child(even) { border-left-color: var(--dn-secondary); } .dn_questions__q { margin-bottom: var(--dn-space-20); color: var(--dn-primary); font-size: var(--dn-text-lg); font-weight: 700; } .dn_questions__a { line-height: 1.6; color: var(--dn-black); margin: 0; } .dn_testimonials { padding: var(--dn-space-128) 0; } .dn_cases { display: grid; gap: var(--dn-space-48); animation: dn_fadeUp 0.8s ease-out 0.2s both; } @media (max-width: 599px) { .dn_cases { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_cases { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_cases { grid-template-columns: repeat(3, 1fr); } } .dn_cases__item { background: var(--dn-white); border: 1px solid var(--dn-gray-200); border-radius: var(--dn-radius-large); padding: var(--dn-space-48); box-shadow: var(--dn-shadow-lg); transition: transform var(--dn-duration); } .dn_cases__item:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_cases__title { color: var(--dn-primary); margin-bottom: var(--dn-space-20); font-size: var(--dn-text-xl); font-weight: 700; } .dn_cases__metrics { background: var(--dn-gray-50); padding: var(--dn-space-20); border-radius: var(--dn-radius-card); margin-bottom: var(--dn-space-24); border-left: 4px solid var(--dn-blue); } .dn_cases__item:nth-child(2) .dn_cases__metrics { border-left-color: var(--dn-secondary); } .dn_cases__item:nth-child(3) .dn_cases__metrics { border-left-color: var(--dn-blue); } .dn_cases__metrics p { margin: var(--dn-space-8) 0; line-height: 1.5; color: var(--dn-black); } .dn_cases__metrics strong { color: var(--dn-primary); } .dn_cases__challenge, .dn_cases__solution { margin-bottom: var(--dn-space-20); line-height: 1.6; color: var(--dn-black); } .dn_cases__solution { margin-bottom: 0; } .dn_cases__challenge strong, .dn_cases__solution strong { color: var(--dn-primary); } .dn_cta { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; } .dn_cta__content { max-width: 800px; margin: 0 auto; animation: dn_fadeUp 0.8s ease-out; } .dn_cta__title { font-size: var(--dn-text-4xl); margin-bottom: var(--dn-space-24); font-weight: 700; line-height: 1.2; } .dn_cta__subtitle { font-size: var(--dn-text-lg); margin-bottom: var(--dn-space-48); line-height: 1.5; } .dn_offer { background: rgba(255, 255, 255, 0.1); padding: var(--dn-space-48); border-radius: var(--dn-radius-large); margin: var(--dn-space-64) 0; backdrop-filter: blur(10px); animation: dn_fadeUp 0.8s ease-out 0.2s both; } .dn_offer__title { font-size: var(--dn-text-xl); margin-bottom: var(--dn-space-24); font-weight: 700; } .dn_offer__subtitle { margin-bottom: var(--dn-space-24); line-height: 1.6; } .dn_offer__features { list-style: none; padding: 0; display: inline-block; text-align: left; margin-bottom: var(--dn-space-40); } .dn_offer__features li { margin-bottom: var(--dn-space-12); padding-left: var(--dn-space-24); position: relative; line-height: 1.5; } .dn_offer__features li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_cta__note { margin: var(--dn-space-24) 0 var(--dn-space-64); opacity: 0.8; font-size: var(--dn-text-base); animation: dn_fadeUp 0.8s ease-out 0.4s both; } .dn_contact { padding-top: var(--dn-space-48); border-top: 1px solid rgba(255, 255, 255, 0.2); animation: dn_fadeUp 0.8s ease-out 0.5s both; } .dn_contact__text { font-size: var(--dn-text-base); opacity: 0.9; margin-bottom: var(--dn-space-16); } .dn_contact__phone { font-size: var(--dn-text-xl); margin-bottom: var(--dn-space-16); font-weight: 700; color: var(--dn-blue); } .dn_contact__note { font-size: var(--dn-text-sm); opacity: 0.8; line-height: 1.5; } @media (max-width: 599px) { .dn_hero__title { font-size: var(--dn-text-3xl); } .dn_hero__subtitle { font-size: var(--dn-text-lg); } .dn_cta__title { font-size: var(--dn-text-3xl); } .dn_calc__results-grid { grid-template-columns: repeat(2, 1fr); } .dn_container { padding: 0 var(--dn-space-16); } } :root { --UDAN-primary: #194A9A; --UDAN-secondary: #2F62AD; --UDAN-blue: #348EDF; --UDAN-accent: #DF4756; --UDAN-dark: #011F4E; --UDAN-black: #000000; --UDAN-white: #ffffff; --UDAN-gray-50: #f8fafc; --UDAN-gray-100: #f1f5f9; --UDAN-gray-200: #e2e8f0; --UDAN-gray-600: #475569; --UDAN-space-16: 1rem; --UDAN-space-20: 1.25rem; --UDAN-space-24: 1.5rem; --UDAN-space-32: 2rem; --UDAN-space-48: 3rem; --UDAN-space-64: 4rem; --UDAN-space-80: 5rem; --UDAN-radius-card: 1rem; --UDAN-radius-large: 1.5rem; --UDAN-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --UDAN-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --UDAN-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); --UDAN-duration: 0.25s; --UDAN-text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --UDAN-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --UDAN-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --UDAN-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --UDAN-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes UDAN_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .UDAN-stats-bar { background: linear-gradient(135deg, var(--UDAN-primary) 0%, var(--UDAN-secondary) 100%); padding: var(--UDAN-space-80) 0; position: relative; overflow: hidden; } .UDAN-stats-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%); pointer-events: none; } .UDAN-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--UDAN-space-20); position: relative; z-index: 1; } @media (max-width: 768px) { .UDAN-container { padding: 0 var(--UDAN-space-16); } } .UDAN-stats-grid { display: grid; column-gap:20px; animation: UDAN_fadeInUp 0.8s ease-out; } @media (max-width: 599px) { .UDAN-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--UDAN-space-24); } } @media (min-width: 600px) and (max-width: 899px) { .UDAN-stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .UDAN-stats-grid { grid-template-columns: repeat(4, 1fr); } } .UDAN-stat-item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--UDAN-radius-card); padding: var(--UDAN-space-32); text-align: center; transition: all var(--UDAN-duration) ease; position: relative; overflow: hidden; } .UDAN-stat-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--UDAN-blue), transparent); transition: left 0.6s ease; } .UDAN-stat-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); box-shadow: var(--UDAN-shadow-xl); } .UDAN-stat-item:hover::before { left: 100%; } .UDAN-stat-item:nth-child(1) { animation-delay: 0.1s; } .UDAN-stat-item:nth-child(2) { animation-delay: 0.2s; } .UDAN-stat-item:nth-child(3) { animation-delay: 0.3s; } .UDAN-stat-item:nth-child(4) { animation-delay: 0.4s; } .UDAN-stat-number { font-size: var(--UDAN-text-3xl); font-weight: 700; color: var(--UDAN-white); margin-bottom: var(--UDAN-space-16); line-height: 1.1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; } .UDAN-stat-number::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--UDAN-blue); border-radius: 1px; opacity: 0; transition: opacity var(--UDAN-duration) ease; } .UDAN-stat-item:hover .UDAN-stat-number::after { opacity: 1; } .UDAN-stat-label { font-size: var(--UDAN-text-base); color: rgba(255, 255, 255, 0.9); font-weight: 500; line-height: 1.4; letter-spacing: 0.025em; } @media (max-width: 480px) { .UDAN-stats-bar { padding: var(--UDAN-space-64) 0; } .UDAN-stat-item { padding: var(--UDAN-space-24); } .UDAN-stat-number { font-size: var(--UDAN-text-2xl); margin-bottom: var(--UDAN-space-12); } .UDAN-stat-label { font-size: var(--UDAN-text-sm); } } @media (min-width: 1200px) { .UDAN-stat-item { padding: var(--UDAN-space-48); } } :root { --sc-primary: #194A9A; --sc-secondary: #2F62AD; --sc-blue: #348EDF; --sc-accent: #DF4756; --sc-dark: #011F4E; --sc-white: #ffffff; --sc-gray-50: #f8fafc; --sc-gray-100: #f1f5f9; --sc-gray-200: #e2e8f0; --sc-space-16: 1rem; --sc-space-20: 1.25rem; --sc-space-24: 1.5rem; --sc-space-32: 2rem; --sc-space-48: 3rem; --sc-space-64: 4rem; --sc-space-80: 5rem; --sc-space-96: 6rem; --sc-radius-lg: 1rem; --sc-radius-xl: 1.5rem; --sc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); --sc-text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --sc-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --sc-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --sc-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --sc-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes sc_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } @keyframes sc_shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .stats-showcase { background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-secondary) 50%, var(--sc-dark) 100%); padding: var(--sc-space-96) 0; position: relative; overflow: hidden; } .stats-showcase::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(52, 142, 223, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%); pointer-events: none; } .stats-showcase__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-space-20); position: relative; z-index: 1; } @media (max-width: 768px) { .stats-showcase__container { padding: 0 var(--sc-space-16); } } .stats-showcase__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .stats-showcase__grid { display: grid; gap: var(--sc-space-32); animation: sc_fadeInUp 0.8s ease-out; } @media (max-width: 599px) { .stats-showcase__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sc-space-24); } } @media (min-width: 600px) and (max-width: 899px) { .stats-showcase__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .stats-showcase__grid { grid-template-columns: repeat(4, 1fr); } } .stats-showcase__card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--sc-radius-xl); padding: var(--sc-space-48) var(--sc-space-32); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .stats-showcase__card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc-blue), transparent); transition: left 0.6s ease; } .stats-showcase__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70% ); background-size: 200% 200%; animation: sc_shimmer 3s infinite; opacity: 0; transition: opacity 0.3s ease; } .stats-showcase__card:hover { transform: translateY(-8px) scale(1.02); background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); box-shadow: var(--sc-shadow-xl); } .stats-showcase__card:hover::before { left: 100%; } .stats-showcase__card:hover::after { opacity: 1; } .stats-showcase__card:nth-child(1) { animation-delay: 0.1s; } .stats-showcase__card:nth-child(2) { animation-delay: 0.2s; } .stats-showcase__card:nth-child(3) { animation-delay: 0.3s; } .stats-showcase__card:nth-child(4) { animation-delay: 0.4s; } .stats-showcase__number { font-size: var(--sc-text-4xl); font-weight: 800; color: var(--sc-white); margin-bottom: var(--sc-space-16); line-height: 1.1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); position: relative; z-index: 2; background: linear-gradient(185deg, var(--sc-white), var(--sc-blue)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size:600% 600%; animation: sc_shimmer 2s infinite; } .stats-showcase__label { font-size: var(--sc-text-base); color: rgba(255, 255, 255, 0.9); font-weight: 500; line-height: 1.4; letter-spacing: 0.025em; position: relative; z-index: 2; } @media (max-width: 599px) { .stats-showcase { padding: var(--sc-space-80) 0; } .stats-showcase__card { padding: var(--sc-space-32) var(--sc-space-24); } .stats-showcase__number { font-size: var(--sc-text-3xl); margin-bottom: var(--sc-space-12); } .stats-showcase__label { font-size: var(--sc-text-sm); } } @media (max-width: 480px) { .stats-showcase__grid { grid-template-columns: 1fr; gap: var(--sc-space-20); } .stats-showcase__card { padding: var(--sc-space-32); } } @media (min-width: 1200px) { .stats-showcase__card { padding: var(--sc-space-64) var(--sc-space-48); } .stats-showcase__number { margin-bottom: var(--sc-space-20); } } /* ========================================== AI Opportunities in Search Marketing ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-50: #f8fafc; --dn-gray-100: #f1f5f9; --dn-gray-200: #e2e8f0; --dn-gray-300: #cbd5e1; --dn-gray-600: #475569; --dn-gray-700: #334155; --dn-gray-800: #1e293b; --dn-gray-900: #0f172a; --dn-space-4: 0.25rem; --dn-space-8: 0.5rem; --dn-space-12: 0.75rem; --dn-space-16: 1rem; --dn-space-20: 1.25rem; --dn-space-24: 1.5rem; --dn-space-32: 2rem; --dn-space-40: 2.5rem; --dn-space-48: 3rem; --dn-space-64: 4rem; --dn-space-80: 5rem; --dn-space-96: 6rem; --dn-space-128: 8rem; --dn-radius-btn: 14px; --dn-radius-card: 1rem; --dn-radius-large: 1.5rem; --dn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --dn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --dn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --dn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --dn-duration: 0.3s; --dn-text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --dn-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --dn-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); --dn-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); --dn-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --dn-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); --dn-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --dn-text-5xl: clamp(2.625rem, 2.25rem + 1.875vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: var(--dn-text-base); line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .dn_page { min-height: 100vh; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-space-20); } @media (max-width: 768px) { .dn_container { padding: 0 var(--dn-space-16); } } .dn_hero { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; position: relative; overflow: hidden; } .dn_hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .dn_hero__content { position: relative; z-index: 1; animation: dn_fadeInUp 0.8s ease-out; } .dn_hero__title { font-size: var(--dn-text-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-24); } .dn_hero__subtitle { font-size: var(--dn-text-xl); line-height: 1.4; margin-bottom: var(--dn-space-24); max-width: 900px; margin-left: auto; margin-right: auto; } .dn_hero__meta { font-size: var(--dn-text-sm); opacity: 0.9; } .dn_breadcrumb { background: var(--dn-gray-50); padding: var(--dn-space-20) 0; } .dn_breadcrumb__nav { font-size: var(--dn-text-sm); color: var(--dn-gray-600); } .dn_breadcrumb__link { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-duration) ease; } .dn_breadcrumb__link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_breadcrumb__separator { margin: 0 var(--dn-space-8); } .dn_breadcrumb__current { color: var(--dn-gray-700); font-weight: 500; } .dn_nav { background: var(--dn-gray-50); } .dn_section { padding: var(--dn-space-96) 0; } .dn_section:nth-child(even) { } .dn_section__title { font-size: var(--dn-text-3xl); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-48); border-bottom: 3px solid var(--dn-blue); padding-bottom: var(--dn-space-16); animation: dn_fadeInUp 0.8s ease-out; } .dn_section__content { max-width: 900px; margin: 0 auto; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_section__heading { font-size: var(--dn-text-2xl); font-weight: 700; color: var(--dn-dark); margin: var(--dn-space-48) 0 var(--dn-space-24); } .dn_section__subheading { font-size: var(--dn-text-xl); font-weight: 600; color: var(--dn-secondary); margin: var(--dn-space-32) 0 var(--dn-space-16); } .dn_section__text { margin-bottom: var(--dn-space-24); line-height: 1.7; color: var(--dn-gray-800); } .dn_section__list { margin: var(--dn-space-24) 0; margin-left: var(--dn-space-40); } .dn_section__list-item { margin-bottom: var(--dn-space-12); line-height: 1.7; color: var(--dn-gray-800); } .dn_section__sublist { margin: var(--dn-space-16) 0; margin-left: var(--dn-space-32); } .dn_section__sublist-item { margin-bottom: var(--dn-space-8); line-height: 1.6; color: var(--dn-gray-700); } .dn_highlight { background: linear-gradient(135deg, rgba(25, 74, 154, 0.08) 0%, rgba(52, 142, 223, 0.08) 100%); border-left: 4px solid var(--dn-blue); padding: var(--dn-space-24); margin: var(--dn-space-32) 0; border-radius: var(--dn-radius-card); } .dn_highlight--accent { background: linear-gradient(135deg, rgba(223, 71, 86, 0.08) 0%, rgba(223, 71, 86, 0.05) 100%); border-left-color: var(--dn-accent); } .dn_highlight--blue { background: linear-gradient(135deg, rgba(52, 142, 223, 0.08) 0%, rgba(47, 98, 173, 0.05) 100%); border-left-color: var(--dn-blue); } .dn_highlight__text { margin: 0; line-height: 1.6; color: var(--dn-gray-800); } .dn_stats { margin: var(--dn-space-48) 0; } .dn_stats__grid { display: grid; gap: var(--dn-space-24); } @media (max-width: 599px) { .dn_stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 600px) and (max-width: 899px) { .dn_stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--dn-space-32); } } @media (min-width: 900px) { .dn_stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--dn-space-32); } } .dn_stats__grid--two-col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dn_stats__card { background: var(--dn-white); border: 1px solid var(--dn-gray-200); border-radius: var(--dn-radius-card); padding: var(--dn-space-32); text-align: center; transition: all var(--dn-duration) ease; box-shadow: var(--dn-shadow-sm); } .dn_stats__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_stats__number { font-size: var(--dn-text-3xl); font-weight: 700; background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-blue) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--dn-space-8); } .dn_stats__label { font-size: var(--dn-text-sm); color: var(--dn-gray-600); line-height: 1.4; } .dn_table-wrapper { overflow-x: auto; margin: var(--dn-space-32) 0; border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-md); } .dn_table { width: 100%; border-collapse: collapse; background: var(--dn-white); border-radius: var(--dn-radius-card); overflow: hidden; min-width: 600px; } .dn_table__head { background: var(--dn-primary); color: var(--dn-white); } .dn_table__header { padding: var(--dn-space-16); text-align: left; font-weight: 600; font-size: var(--dn-text-base); } .dn_table__row:hover { background: var(--dn-gray-50); } .dn_table__cell { padding: var(--dn-space-16); border-bottom: 1px solid var(--dn-gray-200); color: var(--dn-gray-800); } .dn_table__cell--positive { color: var(--dn-blue); font-weight: 600; } .dn_table__cell--negative { color: var(--dn-accent); font-weight: 600; } .dn_faq { background: var(--dn-white); border-radius: var(--dn-radius-card); padding: var(--dn-space-48); margin: var(--dn-space-48) 0; box-shadow: var(--dn-shadow-md); } .dn_faq__item { margin-bottom: var(--dn-space-32); padding-bottom: var(--dn-space-24); border-bottom: 1px solid var(--dn-gray-200); } .dn_faq__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .dn_faq__question { font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-space-16); font-size: var(--dn-text-lg); line-height: 1.4; } .dn_faq__answer { line-height: 1.7; color: var(--dn-gray-800); margin: 0; } .dn_quick-wins { margin: var(--dn-space-48) 0; } .dn_quick-wins__grid { display: grid; gap: var(--dn-space-24); } @media (max-width: 599px) { .dn_quick-wins__grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .dn_quick-wins__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .dn_quick-wins__grid { grid-template-columns: repeat(4, 1fr); } } .dn_quick-wins__card { background: var(--dn-white); border: 1px solid var(--dn-gray-200); border-radius: var(--dn-radius-card); padding: var(--dn-space-24); text-align: center; transition: all var(--dn-duration) ease; box-shadow: var(--dn-shadow-sm); } .dn_quick-wins__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_quick-wins__title { font-size: var(--dn-text-lg); font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-space-12); } .dn_quick-wins__text { font-size: var(--dn-text-sm); color: var(--dn-gray-700); line-height: 1.5; margin: 0; } .dn_cta { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); color: var(--dn-white); padding: var(--dn-space-128) 0; text-align: center; position: relative; overflow: hidden; } .dn_cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .dn_cta__content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; animation: dn_fadeInUp 0.8s ease-out; } .dn_cta__title { font-size: var(--dn-text-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-24); } .dn_cta__text { font-size: var(--dn-text-lg); line-height: 1.6; margin-bottom: var(--dn-space-48); opacity: 0.95; } .dn_cta__buttons { margin-bottom: var(--dn-space-32); } .dn_cta__trust { font-size: var(--dn-text-sm); opacity: 0.9; } .dn_btn { display: inline-block; padding: var(--dn-space-16) var(--dn-space-32); border-radius: var(--dn-radius-btn); text-decoration: none; font-weight: 600; font-size: var(--dn-text-base); border: none; cursor: pointer; transition: all var(--dn-duration) ease; margin: var(--dn-space-8); box-shadow: var(--dn-shadow-md); } .dn_btn--white { background: var(--dn-white); color: var(--dn-primary); } .dn_btn--white:hover { background: var(--dn-gray-100); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_link { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-duration) ease; } .dn_link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_resources { padding: var(--dn-space-96) 0; background: var(--dn-gray-50); } .dn_footer { background: var(--dn-dark); color: var(--dn-white); padding: var(--dn-space-80) 0; text-align: center; } .dn_footer__content { animation: dn_fadeInUp 0.8s ease-out; } .dn_footer__name { font-size: var(--dn-text-xl); color: var(--dn-white); margin-bottom: var(--dn-space-8); display: block; } .dn_footer__tagline { font-size: var(--dn-text-lg); margin-bottom: var(--dn-space-32); color: var(--dn-blue); } .dn_footer__contact { margin-bottom: var(--dn-space-32); } .dn_footer__address, .dn_footer__info { margin: var(--dn-space-8) 0; opacity: 0.9; } .dn_footer__copyright { font-size: var(--dn-text-sm); opacity: 0.8; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--dn-space-24); margin: 0; } @media (max-width: 599px) { .dn_hero__title { font-size: var(--dn-text-3xl); } .dn_hero__subtitle { font-size: var(--dn-text-lg); } .dn_cta__title { font-size: var(--dn-text-3xl); } .dn_section { padding: var(--dn-space-64) 0; } .dn_faq { padding: var(--dn-space-32); } } @media (max-width: 480px) { .dn_container { padding: 0 var(--dn-space-16); } .dn_stats__grid { grid-template-columns: 1fr; } .dn_quick-wins__grid { grid-template-columns: 1fr; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-light: #f8f9fa; --dn-gray-medium: #6c757d; --dn-gray-dark: #343a40; --dn-radius-sm: 4px; --dn-radius-md: 8px; --dn-radius-lg: 12px; --dn-radius-btn: 14px; --dn-space-xs: 4px; --dn-space-sm: 8px; --dn-space-md: 16px; --dn-space-lg: 24px; --dn-space-xl: 32px; --dn-space-2xl: 48px; --dn-space-3xl: 64px; --dn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --dn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --dn-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --dn-transition: 0.2s ease; --dn-transition-slow: 0.3s ease; --dn-container-max: 1200px; --dn-container-padding: var(--dn-space-md); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } .dn-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-space-3xl) 0; position: relative; overflow: hidden; } .dn-hero__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); display: grid; grid-template-columns: 1fr; gap: var(--dn-space-2xl); align-items: center; } .dn-hero__title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-space-lg); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-hero__subtitle { font-size: clamp(1.1rem, 2vw, 1.3rem); margin-bottom: var(--dn-space-xl); opacity: 0.9; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.2s forwards; } .dn-hero__cta { display: flex; gap: var(--dn-space-md); flex-wrap: wrap; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.4s forwards; } .dn-hero__image { width: 100%; height: auto; border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-lg); } .dn-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--dn-space-md) var(--dn-space-xl); border-radius: var(--dn-radius-btn); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: all var(--dn-transition); font-size: 1rem; min-height: 48px; } .dn-btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn-btn--primary:hover { background: #c73e4a; transform: translateY(-2px); box-shadow: var(--dn-shadow-md); } .dn-btn--secondary { background: transparent; color: var(--dn-white); border-color: var(--dn-white); } .dn-btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn-btn--full { width: 100%; } .dn-btn:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn-problem { padding: var(--dn-space-3xl) 0; background: var(--dn-gray-light); } .dn-problem__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-problem__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-space-2xl); color: var(--dn-dark); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-problem__grid { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-xl); } .dn-problem__item { text-align: center; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-problem__item:nth-child(2) { animation-delay: 0.2s; } .dn-problem__item:nth-child(3) { animation-delay: 0.4s; } .dn-problem__item-title { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--dn-space-md); color: var(--dn-primary); } .dn-problem__item-text { font-size: 1rem; color: var(--dn-gray-dark); } .dn-solutions { padding: var(--dn-space-3xl) 0; background: var(--dn-white); } .dn-solutions__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-solutions__header { text-align: center; margin-bottom: var(--dn-space-3xl); } .dn-solutions__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--dn-space-lg); color: var(--dn-dark); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-solutions__subtitle { font-size: 1.1rem; color: var(--dn-gray-dark); max-width: 600px; margin: 0 auto; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.2s forwards; } .dn-solutions__grid { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-xl); } .dn-solutions__card { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-space-xl); box-shadow: var(--dn-shadow-md); border: 1px solid #e9ecef; transition: all var(--dn-transition); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-solutions__card:nth-child(2) { animation-delay: 0.2s; } .dn-solutions__card:nth-child(3) { animation-delay: 0.4s; } .dn-solutions__card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn-solutions__card-icon { margin-bottom: var(--dn-space-lg); } .dn-solutions__icon { width: 60px; height: 60px; } .dn-solutions__card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--dn-space-md); color: var(--dn-primary); } .dn-solutions__card-text { margin-bottom: var(--dn-space-lg); color: var(--dn-gray-dark); } .dn-solutions__card-list { list-style: none; } .dn-solutions__card-list li { position: relative; padding-left: var(--dn-space-lg); margin-bottom: var(--dn-space-sm); color: var(--dn-gray-dark); } .dn-solutions__card-list li:before { content: "✓"; position: absolute; left: 0; color: var(--dn-accent); font-weight: bold; } .dn-results { padding: var(--dn-space-3xl) 0; background: var(--dn-primary); color: var(--dn-white); } .dn-results__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-results__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-space-2xl); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-results__stats { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-xl); margin-bottom: var(--dn-space-3xl); } .dn-results__stat { text-align: center; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-results__stat:nth-child(2) { animation-delay: 0.2s; } .dn-results__stat:nth-child(3) { animation-delay: 0.4s; } .dn-results__stat-number { display: block; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-accent); margin-bottom: var(--dn-space-sm); } .dn-results__stat-label { font-size: 1rem; opacity: 0.9; } .dn-results__testimonial { text-align: center; max-width: 800px; margin: 0 auto; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.6s forwards; } .dn-results__quote { font-size: 1.2rem; font-style: italic; margin-bottom: var(--dn-space-md); line-height: 1.8; } .dn-results__cite { font-size: 1rem; opacity: 0.8; } .dn-services { padding: var(--dn-space-3xl) 0; background: var(--dn-white); } .dn-services__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-services__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-space-3xl); color: var(--dn-dark); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-services__row { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-2xl); align-items: center; margin-bottom: var(--dn-space-3xl); } .dn-services__row:last-child { margin-bottom: 0; } .dn-services__content { opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-services__content-title { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--dn-space-md); color: var(--dn-primary); } .dn-services__content-text { margin-bottom: var(--dn-space-lg); color: var(--dn-gray-dark); font-size: 1rem; } .dn-services__content-list { list-style: none; } .dn-services__content-list li { position: relative; padding-left: var(--dn-space-lg); margin-bottom: var(--dn-space-sm); color: var(--dn-gray-dark); } .dn-services__content-list li:before { content: "→"; position: absolute; left: 0; color: var(--dn-blue); font-weight: bold; } .dn-services__media { opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.2s forwards; } .dn-services__image { width: 100%; height: auto; border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-md); } .dn-benefits { padding: var(--dn-space-3xl) 0; background: var(--dn-gray-light); } .dn-benefits__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-benefits__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-space-3xl); color: var(--dn-dark); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-benefits__grid { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-lg); } .dn-benefits__card { background: var(--dn-white); padding: var(--dn-space-xl); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-sm); transition: all var(--dn-transition); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-benefits__card:nth-child(2) { animation-delay: 0.1s; } .dn-benefits__card:nth-child(3) { animation-delay: 0.2s; } .dn-benefits__card:nth-child(4) { animation-delay: 0.3s; } .dn-benefits__card:nth-child(5) { animation-delay: 0.4s; } .dn-benefits__card:nth-child(6) { animation-delay: 0.5s; } .dn-benefits__card:hover { transform: translateY(-3px); box-shadow: var(--dn-shadow-md); } .dn-benefits__card-title { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--dn-space-md); color: var(--dn-primary); } .dn-benefits__card-text { color: var(--dn-gray-dark); } .dn-cta { padding: var(--dn-space-3xl) 0; background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-secondary) 100%); color: var(--dn-white); } .dn-cta__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-cta__content { text-align: center; max-width: 800px; margin: 0 auto; } .dn-cta__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--dn-space-lg); opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease forwards; } .dn-cta__subtitle { font-size: 1.1rem; margin-bottom: var(--dn-space-2xl); opacity: 0.9; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.2s forwards; } .dn-cta__form { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-space-xl); box-shadow: var(--dn-shadow-lg); text-align: left; opacity: 0; transform: translateY(30px); animation: dn-fadeInUp 0.8s ease 0.4s forwards; } .dn-cta__form-title { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--dn-space-xl); color: var(--dn-dark); text-align: center; } .dn-form__row { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-md); margin-bottom: var(--dn-space-md); } .dn-form__field { margin-bottom: var(--dn-space-md); } .dn-form__label { display: block; margin-bottom: var(--dn-space-xs); font-weight: 500; color: var(--dn-dark); } .dn-form__input, .dn-form__textarea { width: 100%; padding: var(--dn-space-md); border: 2px solid #e9ecef; border-radius: var(--dn-radius-md); font-size: 1rem; transition: border-color var(--dn-transition); min-height: 48px; } .dn-form__input:focus, .dn-form__textarea:focus { outline: none; border-color: var(--dn-primary); box-shadow: 0 0 0 3px rgba(25, 74, 154, 0.1); } .dn-form__textarea { resize: vertical; min-height: 120px; } .dn-footer { background: var(--dn-dark); color: var(--dn-white); padding: var(--dn-space-3xl) 0 var(--dn-space-lg); } .dn-footer__container { max-width: var(--dn-container-max); margin: 0 auto; padding: 0 var(--dn-container-padding); } .dn-footer__content { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-xl); margin-bottom: var(--dn-space-xl); } .dn-footer__brand-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--dn-space-md); color: var(--dn-blue); } .dn-footer__brand-text { opacity: 0.8; line-height: 1.7; } .dn-footer__links { display: grid; grid-template-columns: 1fr; gap: var(--dn-space-xl); } .dn-footer__column-title { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--dn-space-md); color: var(--dn-white); } .dn-footer__list { list-style: none; } .dn-footer__list li { margin-bottom: var(--dn-space-xs); } .dn-footer__link { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color var(--dn-transition); } .dn-footer__link:hover { color: var(--dn-blue); } .dn-footer__text { color: rgba(255, 255, 255, 0.8); } .dn-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--dn-space-lg); text-align: center; } .dn-footer__copyright { font-size: 0.9rem; opacity: 0.7; } @keyframes dn-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 600px) { .dn-hero__container { grid-template-columns: 1fr 1fr; } .dn-problem__grid { grid-template-columns: repeat(2, 1fr); } .dn-solutions__grid { grid-template-columns: repeat(2, 1fr); } .dn-results__stats { grid-template-columns: repeat(2, 1fr); } .dn-services__row { grid-template-columns: 1fr 1fr; } .dn-services__row--reverse { direction: rtl; } .dn-services__row--reverse > * { direction: ltr; } .dn-benefits__grid { grid-template-columns: repeat(2, 1fr); } .dn-form__row { grid-template-columns: 1fr 1fr; } .dn-footer__content { grid-template-columns: 1fr 2fr; } .dn-footer__links { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .dn-problem__grid { grid-template-columns: repeat(3, 1fr); } .dn-solutions__grid { grid-template-columns: repeat(3, 1fr); } .dn-results__stats { grid-template-columns: repeat(3, 1fr); } .dn-benefits__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 599px) { .dn-hero__cta { flex-direction: column; } .dn-btn { width: 100%; } .dn-form__row { grid-template-columns: 1fr; } } /* ========================================== Personal Injury Marketing ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-light: #F8F9FA; --dn-gray-medium: #E5E7EB; --dn-gray-dark: #6B7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius-sm: 8px; --dn-radius-md: 12px; --dn-radius-lg: 16px; --dn-radius-btn: 14px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_pi-page { min-height: 100vh; background: var(--dn-white); } .dn_pi-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; position: relative; overflow: hidden; } .dn_pi-hero__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); animation: dn-fadeInUp 0.8s ease-out; } .dn_pi-hero__content { text-align: center; max-width: 900px; margin: 0 auto; } .dn_pi-hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_pi-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-white); opacity: 0.95; margin-bottom: var(--dn-spacing-2xl); line-height: 1.5; } .dn_pi-hero__actions { display: flex; gap: var(--dn-spacing-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-spacing-xl); } .dn_pi-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius-btn); font-size: 1rem; font-weight: 600; text-decoration: none; transition: all var(--dn-transition); min-width: 200px; cursor: pointer; border: 2px solid transparent; } .dn_pi-btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_pi-btn--primary:hover { background: #C73D4A; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_pi-btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_pi-btn--secondary { background: transparent; color: var(--dn-white); border-color: var(--dn-white); } .dn_pi-btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn_pi-btn--secondary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 2px; } .dn_pi-hero__badge { display: inline-flex; align-items: center; gap: var(--dn-spacing-sm); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-sm) var(--dn-spacing-md); border-radius: var(--dn-radius-lg); color: var(--dn-white); font-size: 0.875rem; } .dn_pi-stats { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.2s both; } .dn_pi-stats__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-stats__item { text-align: center; } .dn_pi-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pi-stats__label { font-size: 1rem; color: var(--dn-gray-dark); } .dn_pi-alert { background: var(--dn-gray-light); padding: var(--dn-spacing-xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.3s both; } .dn_pi-alert__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-alert__content { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); display: flex; align-items: center; gap: var(--dn-spacing-lg); flex-wrap: wrap; } .dn_pi-alert__icon { font-size: 2rem; flex-shrink: 0; } .dn_pi-alert__text { flex: 1; min-width: 250px; } .dn_pi-alert__title { font-size: 1.25rem; font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-xs); } .dn_pi-alert__description { color: var(--dn-white); opacity: 0.95; } .dn_pi-alert__btn { background: var(--dn-white); color: var(--dn-primary); padding: var(--dn-spacing-sm) var(--dn-spacing-lg); border-radius: var(--dn-radius-btn); text-decoration: none; font-weight: 600; transition: all var(--dn-transition); white-space: nowrap; } .dn_pi-alert__btn:hover { background: var(--dn-accent); color: var(--dn-white); transform: translateX(4px); } .dn_pi-services { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.4s both; } .dn_pi-services__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-services__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-card { background: var(--dn-white); border: 1px solid var(--dn-gray-medium); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); transition: all var(--dn-transition); box-shadow: var(--dn-shadow-sm); } .dn_pi-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } .dn_pi-card__icon { font-size: 2.5rem; margin-bottom: var(--dn-spacing-lg); display: block; } .dn_pi-card__title { font-size: 1.25rem; font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_pi-card__description { color: var(--dn-gray-dark); line-height: 1.6; margin-bottom: var(--dn-spacing-lg); } .dn_pi-card__list { list-style: none; padding: 0; margin: 0; } .dn_pi-card__list-item { position: relative; padding-left: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-sm); color: var(--dn-black); line-height: 1.5; } .dn_pi-card__list-item::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_pi-strategies { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.5s both; } .dn_pi-strategies__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-strategies__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-strategies__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-strategy { background: var(--dn-white); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); border-left: 4px solid var(--dn-blue); box-shadow: var(--dn-shadow-sm); transition: all var(--dn-transition); } .dn_pi-strategy:hover { transform: translateX(4px); box-shadow: var(--dn-shadow-md); } .dn_pi-strategy__title { font-size: 1.125rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pi-strategy__text { color: var(--dn-black); line-height: 1.6; } .dn_pi-results { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.6s both; } .dn_pi-results__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-results__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-result { background: var(--dn-white); border: 1px solid var(--dn-gray-medium); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); text-align: center; transition: all var(--dn-transition); } .dn_pi-result:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_pi-result__metric { font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; color: var(--dn-accent); margin-bottom: var(--dn-spacing-md); } .dn_pi-result__title { font-size: 1.25rem; font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_pi-result__description { color: var(--dn-gray-dark); line-height: 1.6; margin-bottom: var(--dn-spacing-lg); } .dn_pi-result__highlight { background: rgba(52, 142, 223, 0.1); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); border-left: 3px solid var(--dn-blue); text-align: left; } .dn_pi-result__highlight strong { color: var(--dn-primary); display: block; margin-bottom: var(--dn-spacing-xs); } .dn_pi-result__highlight p { color: var(--dn-black); margin: 0; font-size: 0.875rem; } .dn_pi-faq { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.7s both; } .dn_pi-faq__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-faq__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-faq__list { display: flex; flex-direction: column; gap: var(--dn-spacing-lg); } .dn_pi-faq__item { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-sm); transition: all var(--dn-transition); } .dn_pi-faq__item:hover { box-shadow: var(--dn-shadow-md); } .dn_pi-faq__question { font-size: 1.125rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_pi-faq__answer { color: var(--dn-black); line-height: 1.6; } .dn_pi-pricing { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-secondary) 100%); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.8s both; } .dn_pi-pricing__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-pricing__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-price { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); position: relative; transition: all var(--dn-transition); } .dn_pi-price--featured { transform: scale(1.05); box-shadow: var(--dn-shadow-xl); } .dn_pi-price__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--dn-accent); color: var(--dn-white); padding: var(--dn-spacing-xs) var(--dn-spacing-md); border-radius: var(--dn-radius-lg); font-size: 0.75rem; font-weight: 700; } .dn_pi-price__name { font-size: 1.5rem; font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-lg); } .dn_pi-price__amount { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_pi-price__period { font-size: 1rem; font-weight: 400; color: var(--dn-gray-dark); } .dn_pi-price__features { list-style: none; padding: 0; margin: 0 0 var(--dn-spacing-xl) 0; } .dn_pi-price__features li { padding: var(--dn-spacing-sm) 0 var(--dn-spacing-sm) var(--dn-spacing-lg); position: relative; color: var(--dn-black); line-height: 1.5; } .dn_pi-price__features li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_pi-price__footer { padding-top: var(--dn-spacing-lg); border-top: 1px solid var(--dn-gray-medium); color: var(--dn-gray-dark); font-size: 0.875rem; } .dn_pi-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-4xl) 0; animation: dn-fadeInUp 0.8s ease-out 0.9s both; } .dn_pi-cta__container { max-width: 800px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-cta__content { text-align: center; } .dn_pi-cta__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); } .dn_pi-cta__subtitle { font-size: 1.125rem; color: var(--dn-white); opacity: 0.95; margin-bottom: var(--dn-spacing-3xl); line-height: 1.5; } .dn_pi-cta__form { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-xl); margin-bottom: var(--dn-spacing-xl); } .dn_pi-cta__form-title { font-size: 1.5rem; font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_pi-cta__note { color: var(--dn-gray-dark); font-size: 0.875rem; margin-top: var(--dn-spacing-md); } .dn_pi-cta__contact { color: var(--dn-white); } .dn_pi-cta__text { margin-bottom: var(--dn-spacing-sm); opacity: 0.9; } .dn_pi-cta__phone { display: inline-block; font-size: 1.5rem; font-weight: 700; color: var(--dn-white); text-decoration: none; transition: all var(--dn-transition); } .dn_pi-cta__phone:hover { color: var(--dn-blue); transform: scale(1.05); } @media (max-width: 768px) { .dn_pi-hero__actions { flex-direction: column; align-items: center; } .dn_pi-btn { width: 100%; max-width: 300px; } .dn_pi-alert__content { flex-direction: column; text-align: center; } .dn_pi-services__grid, .dn_pi-strategies__grid, .dn_pi-results__grid, .dn_pi-pricing__grid { grid-template-columns: 1fr; } .dn_pi-price--featured { transform: none; } .dn_pi-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--dn-spacing-lg); } } @media (max-width: 480px) { .dn_pi-hero__container, .dn_pi-stats__container, .dn_pi-alert__container, .dn_pi-services__container, .dn_pi-strategies__container, .dn_pi-results__container, .dn_pi-faq__container, .dn_pi-pricing__container, .dn_pi-cta__container { padding: 0 var(--dn-spacing-md); } .dn_pi-hero__title { font-size: 1.5rem; } .dn_pi-hero__subtitle { font-size: 1rem; } .dn_pi-services__title, .dn_pi-strategies__title, .dn_pi-results__title, .dn_pi-faq__title, .dn_pi-pricing__title, .dn_pi-cta__title { font-size: 1.5rem; } .dn_pi-stats__grid { grid-template-columns: 1fr; } } /* ========================================== Personal Injury Marketing Los Angeles ========================================== */ /* Remove list bullets */ :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-light: #f8f9fa; --dn-gray-medium: #e5e7eb; --dn-gray-dark: #6b7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius-sm: 8px; --dn-radius-md: 12px; --dn-radius-lg: 16px; --dn-radius-btn: 14px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_pi-page { min-height: 100vh; background: var(--dn-white); } .dn_pi-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; position: relative; overflow: hidden; } .dn_pi-hero__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); animation: dn_fadeInUp 0.8s ease-out; } .dn_pi-hero__content { text-align: center; max-width: 900px; margin: 0 auto; } .dn_pi-hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_pi-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-white); opacity: 0.95; margin-bottom: var(--dn-spacing-2xl); line-height: 1.5; } .dn_pi-hero__actions { display: flex; gap: var(--dn-spacing-md); justify-content: center; flex-wrap: wrap; } .dn_pi-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius-btn); font-size: 1rem; font-weight: 600; text-decoration: none; transition: all var(--dn-transition); min-width: 200px; cursor: pointer; border: 2px solid transparent; } .dn_pi-btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_pi-btn--primary:hover { background: #C73D4A; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_pi-btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_pi-btn--secondary { background: transparent; color: var(--dn-white); border-color: var(--dn-white); } .dn_pi-btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn_pi-btn--secondary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 2px; } .dn_pi-stats { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_pi-stats__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-stats__item { text-align: center; } .dn_pi-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pi-stats__label { font-size: 1rem; color: var(--dn-gray-dark); } .dn_pi-services { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_pi-services__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-services__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-spacing-xl); } .dn_pi-card { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); transition: all var(--dn-transition); box-shadow: var(--dn-shadow-sm); } .dn_pi-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_pi-card__title { font-size: 1.25rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_pi-card__description { color: var(--dn-black); line-height: 1.6; margin-bottom: var(--dn-spacing-lg); } .dn_pi-card__list { list-style: none; padding: 0; margin: 0; } .dn_pi-card__list-item { position: relative; padding-left: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-sm); color: var(--dn-black); line-height: 1.5; } .dn_pi-card__list-item::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_pi-locations { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_pi-locations__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-locations__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-locations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-2xl); } .dn_pi-locations__card { background: var(--dn-gray-light); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); transition: all var(--dn-transition); } .dn_pi-locations__card:hover { background: var(--dn-gray-medium); } .dn_pi-locations__card-title { font-size: 1.125rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pi-locations__card-text { color: var(--dn-black); line-height: 1.5; } .dn_pi-locations__insight { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-blue) 100%); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); text-align: center; } .dn_pi-locations__insight-title { font-size: 1.5rem; font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-md); } .dn_pi-locations__insight-text { font-size: 1.125rem; color: var(--dn-white); line-height: 1.6; opacity: 0.95; } .dn_pi-cases { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.5s both; } .dn_pi-cases__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-cases__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-cases__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-md); } .dn_pi-cases__item { background: var(--dn-white); padding: var(--dn-spacing-lg); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius-sm); transition: all var(--dn-transition); } .dn_pi-cases__item:hover { transform: translateX(4px); box-shadow: var(--dn-shadow-md); } .dn_pi-cases__item-title { display: block; color: var(--dn-dark); margin-bottom: var(--dn-spacing-xs); } .dn_pi-cases__item-text { color: var(--dn-gray-dark); font-size: 0.875rem; margin: 0; } .dn_pi-why { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.6s both; } .dn_pi-why__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-why__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-spacing-2xl); } .dn_pi-why__column { display: flex; flex-direction: column; gap: var(--dn-spacing-xl); } .dn_pi-why__item { padding: 0; } .dn_pi-why__item-title { font-size: 1.25rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pi-why__item-text { color: var(--dn-black); line-height: 1.6; } .dn_pi-faq { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.7s both; } .dn_pi-faq__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-faq__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_pi-faq__list { display: flex; flex-direction: column; gap: var(--dn-spacing-lg); } .dn_pi-faq__item { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-sm); transition: all var(--dn-transition); } .dn_pi-faq__item:hover { box-shadow: var(--dn-shadow-md); } .dn_pi-faq__question { font-size: 1.125rem; font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_pi-faq__answer { color: var(--dn-black); line-height: 1.6; } .dn_pi-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.8s both; } .dn_pi-cta__container { max-width: 800px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_pi-cta__content { text-align: center; } .dn_pi-cta__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); } .dn_pi-cta__subtitle { font-size: 1.125rem; color: var(--dn-white); opacity: 0.95; margin-bottom: var(--dn-spacing-3xl); line-height: 1.5; } .dn_pi-cta__form { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-2xl); } .dn_pi-cta__form-title { font-size: 1.5rem; font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-md); } .dn_pi-cta__form-subtitle { color: var(--dn-white); opacity: 0.9; margin-bottom: var(--dn-spacing-xl); } .dn_pi-cta__actions { display: flex; gap: var(--dn-spacing-md); justify-content: center; flex-wrap: wrap; } .dn_pi-cta__contact { color: var(--dn-white); line-height: 1.6; } .dn_pi-cta__address { margin: var(--dn-spacing-xs) 0; opacity: 0.9; } .dn_pi-contact { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.9s both; } .dn_pi-contact__container { max-width: 600px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); text-align: center; } .dn_pi-contact__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_pi-contact__subtitle { font-size: 1.125rem; color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-2xl); } .dn_pi-contact__form-placeholder { background: var(--dn-gray-light); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius-md); } .dn_pi-contact__form-placeholder p { color: var(--dn-gray-dark); } @media (max-width: 768px) { .dn_pi-hero__actions { flex-direction: column; align-items: center; } .dn_pi-btn { width: 100%; max-width: 300px; } .dn_pi-services__grid, .dn_pi-locations__grid, .dn_pi-cases__grid, .dn_pi-why__grid { grid-template-columns: 1fr; } .dn_pi-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--dn-spacing-lg); } .dn_pi-cta__actions { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .dn_pi-hero__container, .dn_pi-stats__container, .dn_pi-services__container, .dn_pi-locations__container, .dn_pi-cases__container, .dn_pi-why__container, .dn_pi-faq__container, .dn_pi-cta__container, .dn_pi-contact__container { padding: 0 var(--dn-spacing-md); } .dn_pi-hero__title { font-size: 1.5rem; } .dn_pi-hero__subtitle { font-size: 1rem; } .dn_pi-services__title, .dn_pi-locations__title, .dn_pi-cases__title, .dn_pi-why__title, .dn_pi-faq__title, .dn_pi-cta__title, .dn_pi-contact__title { font-size: 1.5rem; } .dn_pi-stats__grid { grid-template-columns: 1fr; } .dn_pi-why__column { gap: var(--dn-spacing-lg); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-light: #F8F9FA; --dn-gray: #E9ECEF; --dn-gray-dark: #6C757D; --dn-success: #28A745; --dn-warning: #FFC107; --dn-danger: #DC3545; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-xxl: 48px; --dn-spacing-xxxl: 64px; --dn-radius-sm: 8px; --dn-radius-md: 14px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } .dn_page-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_container--narrow { max-width: 900px; } .dn_section { padding: var(--dn-spacing-xxxl) var(--dn-spacing-lg); } .dn_section--white { background: var(--dn-white); } .dn_section--gray { background: var(--dn-gray-light); } .dn_section--calculator { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-secondary) 100%); color: var(--dn-white); } .dn_section--cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); } .dn_section__title { font-size: clamp(28px, 5vw, 36px); font-weight: 700; text-align: center; margin-bottom: var(--dn-spacing-xl); color: var(--dn-dark); } .dn_section__title--white { color: var(--dn-white); } .dn_section__subtitle { font-size: clamp(16px, 2vw, 18px); text-align: center; color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-xl); } .dn_animate-fade { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .dn_article-header { background: var(--dn-white); border-bottom: 1px solid var(--dn-gray); padding: var(--dn-spacing-lg) 0; } .dn_article-header__meta { text-align: center; } .dn_article-header__byline, .dn_article-header__reading { color: var(--dn-gray-dark); font-size: 14px; margin: var(--dn-spacing-xs) 0; } .dn_hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%), url('https://intercore.net/images/la-skyline-hero.jpg') center/cover; padding: var(--dn-spacing-xxxl) var(--dn-spacing-lg); text-align: center; color: var(--dn-white); position: relative; } .dn_hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(1, 31, 78, 0.85); } .dn_hero__content { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; } .dn_hero__badge img { height: 50px; margin-bottom: var(--dn-spacing-lg); animation-delay: 0.1s; } .dn_hero__title { font-size: clamp(32px, 6vw, 48px); font-weight: 700; margin-bottom: var(--dn-spacing-lg); animation-delay: 0.2s; } .dn_hero__highlight { font-size: clamp(24px, 4vw, 32px); color: #FFD700; font-weight: 600; margin-bottom: var(--dn-spacing-md); animation-delay: 0.3s; } .dn_hero__subtitle { font-size: clamp(18px, 3vw, 22px); margin-bottom: var(--dn-spacing-xl); opacity: 0.95; animation-delay: 0.4s; } .dn_hero__description { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); margin: var(--dn-spacing-xl) auto; max-width: 800px; animation-delay: 0.5s; } .dn_hero__description p { font-size: clamp(16px, 2vw, 18px); margin: 0; } .dn_hero__logos { height: 60px; margin-top: var(--dn-spacing-xl); animation-delay: 0.6s; } .dn_calculator { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); } .dn_calculator__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } .dn_calculator__card { background: rgba(255, 255, 255, 0.95); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); } .dn_calculator__card h3 { font-size: 20px; margin-bottom: var(--dn-spacing-lg); } .dn_calculator__card--current h3 { color: var(--dn-danger); } .dn_calculator__card--future h3 { color: var(--dn-blue); } .dn_calculator__stats { color: var(--dn-dark); line-height: 2; } .dn_calculator__roi { font-size: 24px; margin-top: var(--dn-spacing-md); font-weight: 700; } .dn_calculator__roi--negative { color: var(--dn-danger); } .dn_calculator__roi--positive { color: var(--dn-blue); } .dn_button { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); background: var(--dn-blue); color: var(--dn-white); text-decoration: none; border-radius: var(--dn-radius-md); font-weight: 600; font-size: 16px; transition: var(--dn-transition); border: none; cursor: pointer; } .dn_button:hover { background: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-md); } .dn_button:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_button--white { background: var(--dn-white); color: var(--dn-primary); } .dn_button--white:hover { background: var(--dn-gray-light); } .dn_button--dark { background: var(--dn-dark); color: var(--dn-white); } .dn_button--dark:hover { background: var(--dn-primary); } .dn_button--large { font-size: 20px; padding: var(--dn-spacing-lg) var(--dn-spacing-xxl); } .dn_toc { background: var(--dn-white); border: 2px solid var(--dn-gray); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-sm); } .dn_toc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_toc__heading { font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_toc__list { list-style: none; line-height: 1.8; } .dn_toc__link { color: var(--dn-gray-dark); text-decoration: none; transition: var(--dn-transition); } .dn_toc__link:hover { color: var(--dn-blue); transform: translateX(4px); display: inline-block; } .dn_link--inline { color: var(--dn-blue); text-decoration: none; font-weight: 500; } .dn_link--inline:hover { text-decoration: underline; } .dn_link { color: var(--dn-blue); text-decoration: none; font-weight: 600; } .dn_link:hover { text-decoration: underline; } .dn_figure { text-align: center; margin: var(--dn-spacing-xl) 0; } .dn_figure img { max-width: 100%; height: auto; border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-lg); } .dn_figure figcaption { margin-top: var(--dn-spacing-md); font-size: 14px; color: var(--dn-gray-dark); font-style: italic; } .dn_stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-xl); } .dn_stat-card { background: var(--dn-gray-light); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); text-align: center; border-top: 4px solid var(--dn-blue); transition: var(--dn-transition); } .dn_stat-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-md); } .dn_stat-card__value { font-size: 36px; font-weight: 700; color: var(--dn-dark); } .dn_stat-card__label { color: var(--dn-gray-dark); margin-top: var(--dn-spacing-xs); } .dn_stat-card__trend { font-size: 14px; margin-top: var(--dn-spacing-xs); color: var(--dn-blue); font-weight: 500; } .dn_stat-card__trend--negative { color: var(--dn-accent); } .dn_stat-card__trend--success { color: var(--dn-success); } .dn_stat-card__trend--warning { color: var(--dn-warning); } .dn_stat-card__trend--purple { color: #A855F7; } .dn_table-wrapper { overflow-x: auto; margin: var(--dn-spacing-xl) 0; } .dn_table { width: 100%; border-collapse: collapse; background: var(--dn-white); box-shadow: var(--dn-shadow-md); border-radius: var(--dn-radius-md); overflow: hidden; } .dn_table thead { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); } .dn_table thead th { padding: var(--dn-spacing-lg); text-align: left; color: var(--dn-white); font-weight: 600; } .dn_table tbody tr { border-bottom: 1px solid var(--dn-gray); } .dn_table tbody tr:nth-child(even) { background: var(--dn-gray-light); } .dn_table tbody tr:hover { background: #E8F4FD; } .dn_table tbody td { padding: var(--dn-spacing-lg); } .dn_table__row--featured { background: #E8F4FD !important; } .dn_table__row--optimal { background: #D4EDDA !important; } .dn_badge { display: inline-block; padding: var(--dn-spacing-xs) var(--dn-spacing-sm); border-radius: 20px; font-size: 14px; font-weight: 600; } .dn_badge--danger { background: var(--dn-danger); color: var(--dn-white); } .dn_badge--warning { background: var(--dn-warning); color: var(--dn-dark); } .dn_badge--success { background: var(--dn-success); color: var(--dn-white); } .dn_badge--primary { background: var(--dn-primary); color: var(--dn-white); } .dn_success-rate { color: var(--dn-blue); font-weight: 700; } .dn_insight { background: #E3F2FD; padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); margin-top: var(--dn-spacing-xl); } .dn_insight p { color: var(--dn-primary); margin: 0; line-height: 1.8; } .dn_comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-spacing-xl); } .dn_comparison-card { border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); } .dn_comparison-card--negative { background: #FFF5F5; border-left: 4px solid var(--dn-accent); } .dn_comparison-card--positive { background: #F0F9FF; border-left: 4px solid var(--dn-blue); } .dn_comparison-card h3 { font-size: 24px; margin-bottom: var(--dn-spacing-lg); } .dn_comparison-card--negative h3 { color: var(--dn-danger); } .dn_comparison-card--positive h3 { color: var(--dn-primary); } .dn_comparison-card ul { list-style: none; line-height: 2; } .dn_channel-name { font-size: 18px; font-weight: 600; } .dn_channel-desc { font-size: 14px; color: var(--dn-gray-dark); } .dn_price-highlight { font-size: 24px; color: var(--dn-blue); font-weight: 700; } .dn_price-highlight--success { color: var(--dn-success); } .dn_price-regular { font-size: 24px; color: var(--dn-gray-dark); font-weight: 700; } .dn_price-label { font-size: 14px; color: var(--dn-success); } .dn_roi-value { font-size: 20px; color: var(--dn-blue); font-weight: 700; } .dn_roi-value--regular { color: var(--dn-dark); } .dn_roi-value--success { color: var(--dn-success); } .dn_verdict { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); border-left: 4px solid var(--dn-blue); margin-top: var(--dn-spacing-xl); } .dn_verdict h3 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_verdict p { line-height: 1.8; font-size: 16px; } .dn_geo-explanation { background: linear-gradient(135deg, #E3F2FD 0%, var(--dn-gray-light) 100%); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); margin: var(--dn-spacing-xl) 0; } .dn_geo-explanation h3 { color: var(--dn-dark); font-size: 28px; margin-bottom: var(--dn-spacing-lg); } .dn_geo-explanation p { font-size: 18px; line-height: 1.8; margin-bottom: var(--dn-spacing-xl); } .dn_video-wrapper { text-align: center; margin: var(--dn-spacing-xl) 0; } .dn_video-wrapper iframe { max-width: 100%; border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-lg); } .dn_video-wrapper p { margin-top: var(--dn-spacing-md); font-size: 14px; color: var(--dn-gray-dark); } .dn_process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_process-card { background: var(--dn-white); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-sm); } .dn_process-card h4 { color: var(--dn-blue); margin-bottom: var(--dn-spacing-md); } .dn_process-card ol { margin-left: var(--dn-spacing-lg); line-height: 1.8; } .dn_ai-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-spacing-lg); margin: var(--dn-spacing-xl) 0; } .dn_ai-platform { background: var(--dn-white); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); text-align: center; box-shadow: var(--dn-shadow-sm); border-top: 3px solid var(--dn-blue); transition: var(--dn-transition); } .dn_ai-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-md); } .dn_ai-platform__icon { font-size: 36px; margin-bottom: var(--dn-spacing-sm); } .dn_ai-platform__name { font-weight: 600; font-size: 16px; } .dn_ai-platform__metric { color: var(--dn-blue); font-size: 24px; font-weight: 700; margin: var(--dn-spacing-sm) 0; } .dn_ai-platform__label { color: var(--dn-gray-dark); font-size: 14px; } .dn_gmb-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } .dn_gmb-comparison__column h3 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_gmb-card { padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); border: 1px solid; } .dn_gmb-card--negative { background: #FFF5F5; border-color: #FFCDD2; } .dn_gmb-card--positive { background: #F0F9FF; border-color: #BBDEFB; } .dn_gmb-card ul { list-style: none; line-height: 2; } .dn_heatmap { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin: var(--dn-spacing-xl) 0; } .dn_heatmap h3 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_heatmap p { line-height: 1.8; margin-bottom: var(--dn-spacing-lg); } .dn_heatmap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dn-spacing-md); } .dn_heatmap__zone { padding: var(--dn-spacing-sm) var(--dn-spacing-md); border-radius: var(--dn-radius-sm); text-align: center; font-weight: 600; color: var(--dn-white); font-size: 14px; } .dn_heatmap__zone--primary { background: var(--dn-primary); } .dn_heatmap__zone--secondary { background: var(--dn-blue); } .dn_heatmap__zone--tertiary { background: var(--dn-success); } .dn_heatmap__zone--growth { background: var(--dn-warning); color: var(--dn-dark); } .dn_heatmap__legend { margin-top: var(--dn-spacing-md); font-size: 14px; color: var(--dn-gray-dark); } .dn_spanish-market { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); box-shadow: var(--dn-shadow-sm); } .dn_spanish-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } .dn_spanish-stat { text-align: center; } .dn_spanish-stat__value { font-size: 48px; font-weight: 700; color: var(--dn-primary); } .dn_spanish-stat__label { color: var(--dn-gray-dark); } .dn_spanish-market h3 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_spanish-strategy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); } .dn_strategy-card { background: var(--dn-gray-light); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); } .dn_strategy-card h4 { color: var(--dn-blue); margin-bottom: var(--dn-spacing-md); font-size: 18px; } .dn_strategy-card ul { list-style: none; line-height: 1.8; } .dn_case-study { background: var(--dn-white); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-lg); border-top: 4px solid var(--dn-blue); margin-bottom: var(--dn-spacing-xl); } .dn_case-study__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--dn-spacing-xl); flex-wrap: wrap; gap: var(--dn-spacing-md); } .dn_case-study__header h3 { color: var(--dn-dark); font-size: 28px; } .dn_case-study__badges { display: flex; gap: var(--dn-spacing-sm); } .dn_case-study__image { margin: var(--dn-spacing-xl) 0; } .dn_case-study__image img { max-width: 600px; width: 100%; height: auto; border-radius: var(--dn-radius-md); } .dn_testimonial { background: var(--dn-gray-light); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); margin: var(--dn-spacing-xl) 0; border-left: 4px solid var(--dn-blue); } .dn_testimonial p { font-style: italic; font-size: 18px; line-height: 1.8; margin: 0; } .dn_testimonial cite { display: block; margin-top: var(--dn-spacing-md); font-weight: 600; font-style: normal; } .dn_case-study h4 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-xl); } .dn_metric { text-align: center; padding: var(--dn-spacing-lg); background: var(--dn-white); border: 2px solid var(--dn-gray); border-radius: var(--dn-radius-md); } .dn_metric__label { color: var(--dn-gray-dark); font-size: 14px; margin-bottom: var(--dn-spacing-xs); } .dn_metric__value { font-size: 28px; font-weight: 700; } .dn_metric__value--negative { color: var(--dn-danger); } .dn_metric__value--positive { color: var(--dn-blue); } .dn_metric__value--success { color: var(--dn-success); } .dn_metric__value--warning { color: var(--dn-warning); } .dn_metric__desc { color: var(--dn-gray-dark); font-size: 14px; } .dn_results-list { line-height: 2; font-size: 18px; margin-bottom: var(--dn-spacing-xl); } .dn_timeline { position: relative; } .dn_timeline__phase { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin-bottom: var(--dn-spacing-xl); border-left: 5px solid; } .dn_timeline__phase--primary { border-color: var(--dn-blue); } .dn_timeline__phase--secondary { border-color: var(--dn-secondary); } .dn_timeline__phase--success { border-color: var(--dn-success); } .dn_timeline__phase h3 { color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_timeline__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-lg); } .dn_timeline__content ul { list-style: none; line-height: 1.8; } .dn_timeline__result { grid-column: 1 / -1; background: #E3F2FD; padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); margin-top: var(--dn-spacing-lg); } .dn_pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } .dn_pricing-card { background: var(--dn-white); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); border: 2px solid var(--dn-gray); position: relative; transition: var(--dn-transition); } .dn_pricing-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_pricing-card--featured { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); color: var(--dn-white); transform: scale(1.02); } .dn_pricing-card--featured:hover { transform: scale(1.02) translateY(-4px); } .dn_pricing-card__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #FFD700; color: var(--dn-dark); padding: var(--dn-spacing-sm) var(--dn-spacing-xl); border-radius: 25px; font-weight: 700; font-size: 14px; white-space: nowrap; } .dn_pricing-card h3 { font-size: 28px; margin-bottom: var(--dn-spacing-sm); text-align: center; } .dn_pricing-card--featured h3 { margin-top: } var(--dn-spacing-md); } .dn_pricing-card__desc { color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-lg); text-align: center; font-size: 16px; } .dn_pricing-card--featured .dn_pricing-card__desc { color: var(--dn-white); opacity: 0.95; } .dn_pricing-card__price { font-size: 48px; font-weight: 700; margin-bottom: var(--dn-spacing-xl); text-align: center; } .dn_pricing-card--featured .dn_pricing-card__price { color: var(--dn-white); } .dn_pricing-card__price span { font-size: 18px; font-weight: 400; color: var(--dn-gray-dark); } .dn_pricing-card--featured .dn_pricing-card__price span { color: var(--dn-white); opacity: 0.9; } .dn_pricing-card__features { list-style: none; line-height: 2; margin-bottom: var(--dn-spacing-xl); font-size: 15px; } .dn_pricing-card__results { padding-top: var(--dn-spacing-lg); border-top: 1px solid var(--dn-gray); margin-bottom: var(--dn-spacing-lg); text-align: center; } .dn_pricing-card--featured .dn_pricing-card__results { border-color: rgba(255, 255, 255, 0.3); } .dn_pricing-card__results p { margin: var(--dn-spacing-xs) 0; font-size: 15px; } .dn_pricing-card__roi { color: var(--dn-blue); font-weight: 700; font-size: 16px; margin-top: var(--dn-spacing-sm); } .dn_pricing-card--featured .dn_pricing-card__roi { color: var(--dn-white); } .dn_pricing-help { text-align: center; color: var(--dn-gray-dark); font-size: 16px; } .dn_faq { max-width: 900px; margin: 0 auto; } .dn_faq__item { background: var(--dn-white); border: 1px solid var(--dn-gray); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-lg); transition: var(--dn-transition); } .dn_faq__item:hover { box-shadow: var(--dn-shadow-md); } .dn_faq__item h3 { color: var(--dn-dark); font-size: 22px; margin-bottom: var(--dn-spacing-md); } .dn_faq__item p { line-height: 1.8; font-size: 18px; } .dn_cta-content { max-width: 900px; margin: 0 auto; text-align: center; } .dn_cta-content h2 { font-size: clamp(32px, 5vw, 42px); margin-bottom: var(--dn-spacing-lg); color: var(--dn-white); } .dn_cta-highlight { font-size: clamp(24px, 4vw, 28px); color: #FFD700; margin-bottom: var(--dn-spacing-sm); } .dn_cta-description { font-size: clamp(18px, 3vw, 20px); margin-bottom: var(--dn-spacing-xl); line-height: 1.8; opacity: 0.95; } .dn_cta-offer { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin-bottom: var(--dn-spacing-xl); } .dn_cta-offer h3 { font-size: clamp(28px, 4vw, 32px); margin-bottom: var(--dn-spacing-xl); color: var(--dn-white); } .dn_cta-offer p { font-size: 18px; margin-bottom: var(--dn-spacing-xl); } .dn_cta-list { list-style: none; text-align: left; max-width: 600px; margin: 0 auto var(--dn-spacing-xl); line-height: 2; font-size: 18px; } .dn_cta-urgency { color: #FFD700; margin-bottom: 0; font-size: 16px; } .dn_cta-footer { font-size: 18px; margin-top: var(--dn-spacing-lg); } .dn_cta-footer span { color: #FFD700; } .dn_locations { display: grid; gap: var(--dn-spacing-xxxl); } .dn_location h3 { color: var(--dn-dark); font-size: 28px; margin-bottom: var(--dn-spacing-xl); text-align: center; } .dn_location__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-spacing-xl); align-items: center; } .dn_location__map { border-radius: var(--dn-radius-md); overflow: hidden; box-shadow: var(--dn-shadow-lg); } .dn_location__map iframe { border: 0; width: 100%; height: 400px; } .dn_location__info { padding: 0 var(--dn-spacing-lg); } .dn_location__detail { margin-bottom: var(--dn-spacing-lg); } .dn_location__detail h4 { color: var(--dn-blue); font-size: 18px; margin-bottom: var(--dn-spacing-sm); } .dn_location__detail p { color: var(--dn-gray-dark); line-height: 1.8; } .dn_location__detail a { color: var(--dn-blue); text-decoration: none; font-weight: 600; } .dn_location__detail a:hover { text-decoration: underline; } .dn_location__detail span { font-size: 14px; color: var(--dn-gray-dark); display: block; } .dn_service-area { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin-top: var(--dn-spacing-xl); } .dn_service-area h3 { color: var(--dn-dark); font-size: 24px; margin-bottom: var(--dn-spacing-lg); } .dn_service-area p { color: var(--dn-gray-dark); line-height: 1.8; margin-bottom: var(--dn-spacing-lg); } .dn_service-area__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-md); } .dn_service-area__item { background: var(--dn-white); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); border-left: 3px solid var(--dn-blue); } .dn_service-area__item strong { display: block; margin-bottom: var(--dn-spacing-xs); } .dn_service-area__item span { font-size: 14px; color: var(--dn-gray-dark); display: block; } .dn_footer { background: var(--dn-dark); padding: var(--dn-spacing-xxxl) var(--dn-spacing-lg); color: var(--dn-white); } .dn_footer__author { background: rgba(255, 255, 255, 0.1); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin-bottom: var(--dn-spacing-xl); } .dn_footer__author h3 { color: var(--dn-blue); margin-bottom: var(--dn-spacing-lg); } .dn_author { display: flex; gap: var(--dn-spacing-xl); align-items: center; flex-wrap: wrap; } .dn_author__image { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--dn-blue); object-fit: cover; } .dn_author__content { flex: 1; min-width: 300px; } .dn_author__content h4 { color: var(--dn-white); margin-bottom: var(--dn-spacing-sm); } .dn_author__content p { line-height: 1.8; margin-bottom: var(--dn-spacing-md); opacity: 0.95; } .dn_author__links { display: flex; gap: var(--dn-spacing-lg); flex-wrap: wrap; } .dn_author__links a { color: var(--dn-blue); text-decoration: none; } .dn_author__links a:hover { text-decoration: underline; } .dn_footer__main { margin-bottom: var(--dn-spacing-xl); } .dn_footer__brand { text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_footer__brand h3 { font-size: 28px; margin-bottom: var(--dn-spacing-sm); } .dn_footer__brand p { font-size: 18px; color: #B8C5D6; } .dn_footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-xl); } .dn_footer__column h4 { color: var(--dn-blue); margin-bottom: var(--dn-spacing-md); } .dn_footer__column p { line-height: 1.8; opacity: 0.9; } .dn_footer__column a { color: var(--dn-white); text-decoration: none; } .dn_footer__column a:hover { color: var(--dn-blue); } .dn_footer__highlight { color: var(--dn-blue); } .dn_footer__legal { text-align: center; padding-top: var(--dn-spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); } .dn_footer__legal p { color: #888; font-size: 14px; line-height: 1.8; } .dn_footer__legal a { color: #888; text-decoration: none; } .dn_footer__legal a:hover { color: var(--dn-blue); } @media (max-width: 768px) { .dn_section { padding: var(--dn-spacing-xl) var(--dn-spacing-md); } .dn_stats-grid, .dn_comparison-grid, .dn_process-grid, .dn_spanish-strategy, .dn_metrics-grid { grid-template-columns: 1fr; } .dn_table { font-size: 14px; } .dn_table thead th, .dn_table tbody td { padding: var(--dn-spacing-md); } .dn_location__content { grid-template-columns: 1fr; } .dn_author { flex-direction: column; text-align: center; } .dn_author__links { justify-content: center; } .dn_ai-platforms { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .dn_timeline__content { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .dn_animate-fade:nth-child(1) { animation-delay: 0.1s; } .dn_animate-fade:nth-child(2) { animation-delay: 0.2s; } .dn_animate-fade:nth-child(3) { animation-delay: 0.3s; } .dn_animate-fade:nth-child(4) { animation-delay: 0.4s; } .dn_animate-fade:nth-child(5) { animation-delay: 0.5s; } .dn_animate-fade:nth-child(6) { animation-delay: 0.6s; } .dn_animate-fade:nth-child(7) { animation-delay: 0.7s; } .dn_animate-fade:nth-child(8) { animation-delay: 0.8s; } /* Update the Timeline section for 3 columns on desktop */ .dn_timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-spacing-xl); } .dn_timeline__phase { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-md); margin-bottom: 0; border-left: 5px solid; } .dn_timeline__content { display: block; } .dn_timeline__content ul { list-style: none; line-height: 1.8; margin-bottom: var(--dn-spacing-lg); } /* Update the Pricing section for 3 columns on desktop */ .dn_pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } /* Responsive adjustments */ @media (max-width: 1024px) { .dn_timeline, .dn_pricing-grid { grid-template-columns: 1fr; } .dn_timeline__phase { margin-bottom: var(--dn-spacing-xl); } } @media (min-width: 768px) and (max-width: 1024px) { .dn_timeline, .dn_pricing-grid { grid-template-columns: repeat(2, 1fr); } } /* Adjust the featured pricing card for 3-column layout */ @media (min-width: 1025px) { .dn_pricing-card--featured { transform: scale(1.05); } .dn_pricing-card--featured:hover { transform: scale(1.05) translateY(-4px); } /* Make the timeline phases equal height */ .dn_timeline__phase { display: flex; flex-direction: column; height: 100%; } .dn_timeline__result { margin-top: auto; } } color: var(--dn-color-gray-600); } .dn_strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_strategy-card { background: var(--dn-color-gray-100); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-lg); } .dn_strategy-card__title { color: var(--dn-color-blue); margin-bottom: var(--dn-spacing-md); } .dn_strategy-card__list { line-height: 1.8; } .dn_case-study { background: var(--dn-color-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); box-shadow: var(--dn-shadow-lg); margin-bottom: var(--dn-spacing-2xl); border-top: 4px solid var(--dn-color-blue); } .dn_case-study__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--dn-spacing-xl); flex-wrap: wrap; gap: var(--dn-spacing-md); } .dn_case-study__title { color: var(--dn-color-dark); font-size: 28px; margin: 0; } .dn_case-study__badges { display: flex; gap: var(--dn-spacing-md); } .dn_case-study__figure { margin-bottom: var(--dn-spacing-xl); } .dn_case-study__image { width: 100%; max-width: 600px; height: auto; border-radius: var(--dn-radius-lg); } .dn_testimonial { background: var(--dn-color-gray-100); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-xl); } .dn_testimonial__text { font-style: italic; font-size: 18px; line-height: 1.8; margin: 0; } .dn_testimonial__author { margin-top: var(--dn-spacing-md); font-weight: 600; display: block; } .dn_case-study__metrics-title { color: var(--dn-color-dark); margin-bottom: var(--dn-spacing-lg); } .dn_metrics-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-xl); } .dn_metric-box { text-align: center; padding: var(--dn-spacing-lg); background: var(--dn-color-white); border: 2px solid var(--dn-color-gray-200); border-radius: var(--dn-radius-lg); } .dn_metric-box__label { color: var(--dn-color-gray-600); font-size: 14px; margin-bottom: var(--dn-spacing-xs); } .dn_metric-box__value { font-size: 28px; font-weight: bold; color: var(--dn-color-dark); } .dn_metric-box__value--danger { color: var(--dn-color-accent); } .dn_metric-box__value--primary { color: var(--dn-color-blue); } .dn_metric-box__value--success { color: var(--dn-color-success); } .dn_metric-box__value--warning { color: var(--dn-color-warning); } .dn_metric-box__sublabel { color: var(--dn-color-gray-600); font-size: 14px; } .dn_case-study__challenge, .dn_case-study__solution { font-size: 18px; line-height: 1.8; margin-bottom: var(--dn-spacing-xl); } .dn_results-list { line-height: 2; font-size: 18px; margin-bottom: var(--dn-spacing-xl); } .dn_timeline { position: relative; } .dn_timeline__item { background: var(--dn-color-gray-100); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-xl); border-left: 5px solid; } .dn_timeline__item--primary { border-color: var(--dn-color-blue); } .dn_timeline__item--secondary { border-color: #00d4ff; } .dn_timeline__item--success { border-color: var(--dn-color-success); } .dn_timeline__title { color: var(--dn-color-dark); margin-bottom: var(--dn-spacing-lg); } .dn_timeline__item--primary .dn_timeline__title { color: var(--dn-color-blue); } .dn_timeline__item--secondary .dn_timeline__title { color: #00d4ff; } .dn_timeline__item--success .dn_timeline__title { color: var(--dn-color-success); } .dn_timeline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-lg); } .dn_timeline__list { line-height: 1.8; } .dn_timeline__result { background: #e3f2fd; padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); margin-top: var(--dn-spacing-lg); } .dn_pricing-grid { display: flex; flex-direction: column; gap: var(--dn-spacing-xl); align-items: center; } .dn_pricing-card { width: 100%; max-width: 500px; background: var(--dn-color-white); border-radius: var(--dn-radius-xl); padding: var(--dn-spacing-2xl) var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); position: relative; border: 2px solid var(--dn-color-gray-200); transition: var(--dn-transition); } .dn_pricing-card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-xl); } .dn_pricing-card--featured { background: linear-gradient(135deg, #1db6ff 0%, #00bfff 100%); color: var(--dn-color-white); transform: scale(1.02); box-shadow: 0 10px 30px rgba(29,182,255,0.3); border: none; } .dn_pricing-card__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #ffd700; color: var(--dn-color-dark); padding: var(--dn-spacing-sm) var(--dn-spacing-xl); border-radius: var(--dn-radius-full); font-weight: bold; font-size: 14px; white-space: nowrap; } .dn_pricing-card__title { font-size: 28px; margin-bottom: var(--dn-spacing-md); text-align: center; color: var(--dn-color-dark); } .dn_pricing-card--featured .dn_pricing-card__title { color: var(--dn-color-white); margin-top: var(--dn-spacing-md); } .dn_pricing-card__subtitle { color: var(--dn-color-gray-600); margin-bottom: var(--dn-spacing-lg); font-size: 16px; text-align: center; } .dn_pricing-card--featured .dn_pricing-card__subtitle { color: var(--dn-color-white); } .dn_pricing-card__price { font-size: 48px; font-weight: bold; margin-bottom: var(--dn-spacing-xl); text-align: center; color: var(--dn-color-primary); } .dn_pricing-card--featured .dn_pricing-card__price { color: var(--dn-color-white); } .dn_pricing-card__period { font-size: 18px; font-weight: normal; color: var(--dn-color-gray-600); } .dn_pricing-card--featured .dn_pricing-card__period { color: var(--dn-color-white); } .dn_pricing-card__features { line-height: 2; margin-bottom: var(--dn-spacing-xl); font-size: 15px; list-style: none; padding: 0; } .dn_pricing-card__results { padding-top: var(--dn-spacing-lg); border-top: 1px solid var(--dn-color-gray-200); margin-bottom: var(--dn-spacing-lg); text-align: center; } .dn_pricing-card--featured .dn_pricing-card__results { border-color: rgba(255,255,255,0.3); } .dn_pricing-card__results-title { margin: 0 0 var(--dn-spacing-md) 0; font-size: 14px; color: var(--dn-color-gray-600); } .dn_pricing-card--featured .dn_pricing-card__results-title { color: var(--dn-color-white); } .dn_pricing-card__results p { margin: var(--dn-spacing-xs) 0; font-size: 15px; } .dn_pricing-card__roi { margin: var(--dn-spacing-md) 0 0 0; color: var(--dn-color-blue); font-weight: bold; font-size: 16px; } .dn_pricing-card--featured .dn_pricing-card__roi { color: var(--dn-color-white); } .dn_pricing-help { text-align: center; margin-top: var(--dn-spacing-2xl); } .dn_pricing-help p { color: var(--dn-color-gray-600); font-size: 16px; } .dn_faqs { display: flex; flex-direction: column; gap: var(--dn-spacing-lg); } .dn_faq { background: var(--dn-color-white); border: 1px solid var(--dn-color-gray-200); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); } .dn_faq__question { color: var(--dn-color-dark); font-size: 22px; margin-bottom: var(--dn-spacing-md); } .dn_faq__answer { line-height: 1.8; font-size: 18px; } .dn_cta-section { background: linear-gradient(135deg, var(--dn-color-dark) 0%, var(--dn-color-primary) 100%); padding: var(--dn-spacing-4xl) var(--dn-spacing-lg); text-align: center; color: var(--dn-color-white); } .dn_cta-content { max-width: 900px; margin: 0 auto; } .dn_cta__title { font-size: clamp(32px, 5vw, 42px); margin-bottom: var(--dn-spacing-lg); } .dn_cta__highlight { font-size: 28px; margin-bottom: var(--dn-spacing-md); color: #ffd700; } .dn_cta__text { font-size: 20px; margin-bottom: var(--dn-spacing-2xl); line-height: 1.8; } .dn_cta-box { background: rgba(255,255,255,0.1); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-2xl); backdrop-filter: blur(10px); } .dn_cta-box__title { font-size: 32px; margin-bottom: var(--dn-spacing-xl); } .dn_cta-box__subtitle { font-size: 18px; margin-bottom: var(--dn-spacing-xl); } .dn_cta-box__list { list-style: none; padding: 0; line-height: 2; font-size: 18px; text-align: left; max-width: 600px; margin: 0 auto var(--dn-spacing-xl); } .dn_cta-box__offer { font-size: 16px; color: #ffd700; margin-bottom: 0; } .dn_cta__footer { font-size: 18px; } .dn_cta__footer-highlight { color: #ffd700; } .dn_locations { display: flex; flex-direction: column; gap: var(--dn-spacing-3xl); } .dn_location__title { color: var(--dn-color-dark); font-size: 28px; margin-bottom: var(--dn-spacing-xl); text-align: center; } .dn_location__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-spacing-2xl); align-items: center; } .dn_location__map { width: 100%; border-radius: var(--dn-radius-lg); overflow: hidden; box-shadow: var(--dn-shadow-lg); } .dn_location__iframe { border: 0; width: 100%; height: 400px; } .dn_location__detail { margin-bottom: var(--dn-spacing-lg); } .dn_location__detail-title { color: var(--dn-color-blue); font-size: 18px; margin-bottom: var(--dn-spacing-md); } .dn_location__detail p { color: var(--dn-color-gray-600); line-height: 1.8; } .dn_location__note { font-size: 14px; display: block; } .dn_service-area { background: var(--dn-color-gray-100); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); margin-top: var(--dn-spacing-2xl); } .dn_service-area__title { color: var(--dn-color-dark); font-size: 24px; margin-bottom: var(--dn-spacing-lg); } .dn_service-area__intro { color: var(--dn-color-gray-600); line-height: 1.8; margin-bottom: var(--dn-spacing-lg); } .dn_service-area__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-md); } .dn_service-area__item { background: var(--dn-color-white); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); border-left: 3px solid var(--dn-color-blue); } .dn_service-area__detail { font-size: 14px; color: var(--dn-color-gray-600); display: block; } .dn_footer { background: var(--dn-color-dark); padding: var(--dn-spacing-3xl) var(--dn-spacing-lg); color: var(--dn-color-white); } .dn_author-bio { background: rgba(255,255,255,0.1); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-2xl); } .dn_author-bio__title { color: var(--dn-color-blue); margin-bottom: var(--dn-spacing-lg); } .dn_author-bio__content { display: flex; gap: var(--dn-spacing-xl); align-items: center; flex-wrap: wrap; } .dn_author-bio__image { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--dn-color-blue); object-fit: cover; } .dn_author-bio__text { flex: 1; min-width: 300px; } .dn_author-bio__name { color: var(--dn-color-white); margin-bottom: var(--dn-spacing-md); } .dn_author-bio__description { line-height: 1.8; margin-bottom: var(--dn-spacing-md); } .dn_author-bio__links { display: flex; gap: var(--dn-spacing-lg); flex-wrap: wrap; } .dn_author-bio__links a { color: var(--dn-color-blue); } .dn_footer__main { text-align: center; margin-bottom: var(--dn-spacing-2xl); } .dn_footer__brand-title { font-size: 28px; margin-bottom: var(--dn-spacing-md); } .dn_footer__brand-tagline { font-size: 18px; color: #b8c5d6; margin-bottom: var(--dn-spacing-2xl); } .dn_footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-2xl); margin-bottom: var(--dn-spacing-2xl); text-align: left; } .dn_footer__heading { color: var(--dn-color-blue); margin-bottom: var(--dn-spacing-md); } .dn_footer__text { line-height: 1.8; } .dn_footer__link { color: var(--dn-color-white); text-decoration: none; transition: var(--dn-transition); } .dn_footer__link:hover { color: var(--dn-color-blue); } .dn_footer__highlight { color: var(--dn-color-blue); } .dn_footer__bottom { text-align: center; padding-top: var(--dn-spacing-xl); border-top: 1px solid #2c3e50; } .dn_footer__copyright { color: #888; font-size: 14px; } .dn_footer__legal-link { color: #888; text-decoration: none; transition: var(--dn-transition); } .dn_footer__legal-link:hover { color: var(--dn-color-blue); } a:focus-visible, button:focus-visible { outline: 2px solid var(--dn-color-blue); outline-offset: 2px; } @media (max-width: 768px) { .dn_container { padding: 0 var(--dn-spacing-md); } .dn_hero { padding: var(--dn-spacing-2xl) var(--dn-spacing-md); } .dn_section { padding: var(--dn-spacing-2xl) 0; } .dn_calculator__grid, .dn_toc__grid, .dn_comparison-grid, .dn_process-grid, .dn_strategy-grid, .dn_gmb-comparison, .dn_timeline__grid { grid-template-columns: 1fr; } .dn_metrics-grid, .dn_ai-platforms, .dn_heatmap-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .dn_spanish-market__stats { grid-template-columns: repeat(2, 1fr); } .dn_location__content { grid-template-columns: 1fr; } .dn_footer__grid { grid-template-columns: 1fr; text-align: center; } .dn_author-bio__content { flex-direction: column; text-align: center; } .dn_author-bio__links { justify-content: center; } .dn_pricing-card { padding: var(--dn-spacing-lg); } .dn_cta-section { padding: var(--dn-spacing-2xl) var(--dn-spacing-md); } .dn_table { font-size: 14px; } .dn_table th, .dn_table td { padding: var(--dn-spacing-sm); } .dn_btn--cta { font-size: 20px; padding: var(--dn-spacing-md) var(--dn-spacing-lg); } } @media (max-width: 480px) { .dn_hero__title { font-size: 28px; } .dn_section__title { font-size: 24px; } .dn_metrics-grid { grid-template-columns: 1fr; } .dn_spanish-market__stats { grid-template-columns: 1fr; } .dn_service-area__grid { grid-template-columns: 1fr; } } @media (min-width: 1440px) { .dn_container { max-width: 1280px; } .dn_hero { } } :root { --dn-pi-primary: #194A9A; --dn-pi-secondary: #2F62AD; --dn-pi-blue: #348EDF; --dn-pi-accent: #DF4756; --dn-pi-dark: #011F4E; --dn-pi-black: #000000; --dn-pi-white: #FFFFFF; --dn-pi-gray-50: #F8F9FA; --dn-pi-gray-100: #F1F5F9; --dn-pi-gray-200: #E2E8F0; --dn-pi-gray-300: #CBD5E1; --dn-pi-gray-600: #475569; --dn-pi-gray-700: #334155; --dn-pi-gray-800: #1E293B; --dn-pi-space-4: 4px; --dn-pi-space-8: 8px; --dn-pi-space-12: 12px; --dn-pi-space-16: 16px; --dn-pi-space-20: 20px; --dn-pi-space-24: 24px; --dn-pi-space-32: 32px; --dn-pi-space-40: 40px; --dn-pi-space-48: 48px; --dn-pi-space-64: 64px; --dn-pi-space-80: 80px; --dn-pi-space-96: 96px; --dn-pi-radius-sm: 8px; --dn-pi-radius-md: 12px; --dn-pi-radius-lg: 16px; --dn-pi-radius-btn: 14px; --dn-pi-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-pi-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-pi-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-pi-shadow-xl: 0 16px 48px rgba(0,0,0,0.2); --dn-pi-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-pi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn-pi-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .dn-pi-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dn-pi-black); background: var(--dn-pi-white); } .dn-pi-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-pi-space-24); } .dn-pi-meta { background: var(--dn-pi-white); border-bottom: 1px solid var(--dn-pi-gray-200); padding: var(--dn-pi-space-16) 0; } .dn-pi-meta__content { text-align: center; } .dn-pi-meta__info, .dn-pi-meta__reading { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); margin: var(--dn-pi-space-4) 0; } .dn-pi-meta__link { color: var(--dn-pi-primary); text-decoration: none; transition: var(--dn-pi-transition); } .dn-pi-meta__link:hover { color: var(--dn-pi-blue); text-decoration: underline; } .dn-pi-hero { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-secondary) 100%), url('https://intercore.net/images/la-skyline-hero.jpg') center/cover; padding: var(--dn-pi-space-96) 0; position: relative; overflow: hidden; } .dn-pi-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(1, 31, 78, 0.9); } .dn-pi-hero__content { position: relative; z-index: 1; text-align: center; animation: dn-pi-fadeInUp 0.8s ease-out; } .dn-pi-hero__rating { height: 50px; margin-bottom: var(--dn-pi-space-24); } .dn-pi-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--dn-pi-white); margin-bottom: var(--dn-pi-space-24); line-height: 1.2; } .dn-pi-hero__highlight { font-size: clamp(1.5rem, 4vw, 2rem); color: #FFD700; font-weight: 600; margin-bottom: var(--dn-pi-space-16); } .dn-pi-hero__subtitle { font-size: clamp(1.125rem, 3vw, 1.375rem); color: var(--dn-pi-gray-200); margin-bottom: var(--dn-pi-space-32); } .dn-pi-hero__description { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-lg); margin: var(--dn-pi-space-32) auto; max-width: 800px; } .dn-pi-hero__description p { font-size: clamp(1rem, 2vw, 1.125rem); color: var(--dn-pi-white); margin: 0; } .dn-pi-hero__platforms { height: 60px; margin-top: var(--dn-pi-space-32); } .dn-pi-calculator { background: linear-gradient(135deg, var(--dn-pi-primary) 0%, var(--dn-pi-blue) 100%); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.1s both; } .dn-pi-calculator__wrapper { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-48); } .dn-pi-calculator__title { color: var(--dn-pi-white); font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin-bottom: var(--dn-pi-space-40); } .dn-pi-calculator__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-40); } .dn-pi-calculator__card { background: rgba(255, 255, 255, 0.95); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-md); } .dn-pi-calculator__card h3 { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-pi-space-20); } .dn-pi-calculator__card--current h3 { color: var(--dn-pi-accent); } .dn-pi-calculator__card--improved h3 { color: var(--dn-pi-primary); } .dn-pi-calculator__stats { line-height: 2; color: var(--dn-pi-black); } .dn-pi-calculator__roi { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: var(--dn-pi-space-16); font-weight: 700; } .dn-pi-calculator__card--current .dn-pi-calculator__roi { color: var(--dn-pi-accent); } .dn-pi-calculator__card--improved .dn-pi-calculator__roi { color: var(--dn-pi-primary); } .dn-pi-btn { display: inline-block; padding: var(--dn-pi-space-16) var(--dn-pi-space-40); border-radius: var(--dn-pi-radius-btn); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: var(--dn-pi-transition); text-align: center; border: 2px solid transparent; } .dn-pi-btn--primary { background: var(--dn-pi-primary); color: var(--dn-pi-white); } .dn-pi-btn--primary:hover { background: var(--dn-pi-secondary); transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-btn--primary:focus-visible { outline: 3px solid var(--dn-pi-blue); outline-offset: 2px; } .dn-pi-btn--secondary { background: var(--dn-pi-dark); color: var(--dn-pi-white); } .dn-pi-btn--secondary:hover { background: var(--dn-pi-primary); transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-btn--white { background: var(--dn-pi-white); color: var(--dn-pi-primary); } .dn-pi-btn--white:hover { background: var(--dn-pi-gray-50); transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-btn--accent { background: var(--dn-pi-accent); color: var(--dn-pi-white); } .dn-pi-btn--accent:hover { background: #C73D4A; transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-btn--accent:focus-visible { outline: 3px solid var(--dn-pi-accent); outline-offset: 2px; } .dn-pi-toc { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.2s both; } .dn-pi-toc__wrapper { background: var(--dn-pi-white); border: 2px solid var(--dn-pi-gray-200); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-32); box-shadow: var(--dn-pi-shadow-sm); } .dn-pi-toc__title { color: var(--dn-pi-dark); font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-pi-space-24); } .dn-pi-toc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-pi-space-24); } .dn-pi-toc__heading { font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-12); } .dn-pi-toc__list { list-style: none; padding: 0; } .dn-pi-toc__link { color: var(--dn-pi-gray-600); text-decoration: none; transition: var(--dn-pi-transition); display: block; padding: var(--dn-pi-space-4) 0; } .dn-pi-toc__link:hover { color: var(--dn-pi-blue); transform: translateX(4px); } .dn-pi-market { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.3s both; } .dn-pi-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--dn-pi-dark); text-align: center; margin-bottom: var(--dn-pi-space-16); font-weight: 700; } .dn-pi-section__subtitle { text-align: center; color: var(--dn-pi-gray-600); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-48); } .dn-pi-section__heading { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-pi-dark); margin: var(--dn-pi-space-48) 0 var(--dn-pi-space-24); } .dn-pi-market__image { text-align: center; margin-bottom: var(--dn-pi-space-48); } .dn-pi-market__image img { max-width: 100%; height: auto; border-radius: var(--dn-pi-radius-lg); box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-market__caption { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); margin-top: var(--dn-pi-space-12); font-style: italic; } .dn-pi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dn-pi-space-24); margin-bottom: var(--dn-pi-space-48); } .dn-pi-stats__item { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); text-align: center; border-top: 4px solid var(--dn-pi-primary); transition: var(--dn-pi-transition); } .dn-pi-stats__item:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-stats__item:nth-child(2) { border-top-color: var(--dn-pi-accent); } .dn-pi-stats__item:nth-child(3) { border-top-color: var(--dn-pi-secondary); } .dn-pi-stats__item:nth-child(4) { border-top-color: var(--dn-pi-blue); } .dn-pi-stats__item:nth-child(5) { border-top-color: var(--dn-pi-primary); } .dn-pi-stats__number { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-pi-dark); } .dn-pi-stats__label { color: var(--dn-pi-gray-600); margin-top: var(--dn-pi-space-8); } .dn-pi-stats__trend { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-primary); margin-top: var(--dn-pi-space-4); } .dn-pi-stats__trend--accent { color: var(--dn-pi-accent); } .dn-pi-table-wrapper { overflow-x: auto; margin: var(--dn-pi-space-32) 0; } .dn-pi-table { width: 100%; min-width: 600px; border-collapse: collapse; background: var(--dn-pi-white); box-shadow: var(--dn-pi-shadow-md); border-radius: var(--dn-pi-radius-lg); overflow: hidden; } .dn-pi-table thead { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-secondary) 100%); } .dn-pi-table th { padding: var(--dn-pi-space-16); color: var(--dn-pi-white); font-weight: 600; text-align: left; } .dn-pi-table th:not(:first-child) { text-align: center; } .dn-pi-table tbody tr { border-bottom: 1px solid var(--dn-pi-gray-200); } .dn-pi-table tbody tr:last-child { border-bottom: none; } .dn-pi-table td { padding: var(--dn-pi-space-16); color: var(--dn-pi-black); } .dn-pi-table td:not(:first-child) { text-align: center; } .dn-pi-table__row--featured { background: #E3F2FD; } .dn-pi-table__row--optimal { background: #D4EDDA; } .dn-pi-badge { display: inline-block; padding: var(--dn-pi-space-4) var(--dn-pi-space-12); border-radius: 20px; font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600; } .dn-pi-badge--danger { background: var(--dn-pi-accent); color: var(--dn-pi-white); } .dn-pi-badge--warning { background: #FFC107; color: var(--dn-pi-black); } .dn-pi-badge--info { background: var(--dn-pi-secondary); color: var(--dn-pi-white); } .dn-pi-badge--success { background: #28A745; color: var(--dn-pi-white); } .dn-pi-badge--primary { background: var(--dn-pi-primary); color: var(--dn-pi-white); } .dn-pi-badge--secondary { background: var(--dn-pi-blue); color: var(--dn-pi-white); } .dn-pi-insight { background: #E3F2FD; padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); margin-top: var(--dn-pi-space-32); } .dn-pi-insight p { color: var(--dn-pi-primary); margin: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-pi-competition { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.4s both; } .dn-pi-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-space-32); } .dn-pi-comparison__card { padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); } .dn-pi-comparison__card--negative { background: #FFF5F5; border-left: 4px solid var(--dn-pi-accent); } .dn-pi-comparison__card--positive { background: #F0F9FF; border-left: 4px solid var(--dn-pi-primary); } .dn-pi-comparison__card h3 { color: var(--dn-pi-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-pi-space-20); } .dn-pi-comparison__card--negative h3 { color: var(--dn-pi-accent); } .dn-pi-comparison__card--positive h3 { color: var(--dn-pi-primary); } .dn-pi-comparison__card ul { list-style: none; padding: 0; line-height: 2; } .dn-pi-channels { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.5s both; } .dn-pi-channel { display: flex; flex-direction: column; } .dn-pi-channel__name { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--dn-pi-dark); } .dn-pi-channel__desc { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); } .dn-pi-price--highlight { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-pi-primary); font-weight: 700; } .dn-pi-price { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-pi-gray-600); font-weight: 700; } .dn-pi-price__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-secondary); } .dn-pi-roi--highlight { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-pi-primary); font-weight: 700; } .dn-pi-roi { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--dn-pi-dark); } .dn-pi-verdict { background: var(--dn-pi-white); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); margin-top: var(--dn-pi-space-32); border-left: 4px solid var(--dn-pi-primary); } .dn-pi-verdict h3 { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-16); } .dn-pi-verdict p { line-height: 1.7; color: var(--dn-pi-black); } .dn-pi-ai { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.6s both; } .dn-pi-ai__image { text-align: center; margin-bottom: var(--dn-pi-space-48); } .dn-pi-ai__image img { max-width: 100%; height: auto; border-radius: var(--dn-pi-radius-lg); } .dn-pi-ai__caption { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); margin-top: var(--dn-pi-space-12); font-style: italic; } .dn-pi-geo { background: linear-gradient(135deg, #E3F2FD 0%, var(--dn-pi-gray-50) 100%); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-40); margin-bottom: var(--dn-pi-space-48); } .dn-pi-geo__title { color: var(--dn-pi-dark); font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-pi-space-20); } .dn-pi-geo__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--dn-pi-space-32); color: var(--dn-pi-black); } .dn-pi-video { text-align: center; margin-bottom: var(--dn-pi-space-32); } .dn-pi-video iframe { max-width: 100%; border-radius: var(--dn-pi-radius-lg); } .dn-pi-video__caption { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); margin-top: var(--dn-pi-space-12); } .dn-pi-geo__process { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-space-32); } .dn-pi-geo__card { background: var(--dn-pi-white); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); } .dn-pi-geo__card h4 { color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-16); } .dn-pi-geo__card ol { line-height: 1.8; padding-left: var(--dn-pi-space-20); } .dn-pi-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-pi-space-20); margin: var(--dn-pi-space-48) 0; } .dn-pi-platform { background: var(--dn-pi-white); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); text-align: center; box-shadow: var(--dn-pi-shadow-sm); border-top: 3px solid var(--dn-pi-primary); transition: var(--dn-pi-transition); } .dn-pi-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-platform:nth-child(2) { border-top-color: var(--dn-pi-blue); } .dn-pi-platform:nth-child(3) { border-top-color: var(--dn-pi-secondary); } .dn-pi-platform:nth-child(4) { border-top-color: var(--dn-pi-blue); } .dn-pi-platform:nth-child(5) { border-top-color: var(--dn-pi-primary); } .dn-pi-platform:nth-child(6) { border-top-color: var(--dn-pi-accent); } .dn-pi-platform__icon { font-size: 2.25rem; margin-bottom: var(--dn-pi-space-8); } .dn-pi-platform__name { font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-dark); } .dn-pi-platform__metric { color: var(--dn-pi-primary); font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; margin: var(--dn-pi-space-8) 0; } .dn-pi-platform__label { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-pi-gmb { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.7s both; } .dn-pi-gmb__comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-48); } .dn-pi-gmb__card { padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); } .dn-pi-gmb__card--negative { background: #FFF5F5; border: 1px solid #FFCDD2; } .dn-pi-gmb__card--positive { background: #F0F9FF; border: 1px solid #BBDEFB; } .dn-pi-gmb__card h3 { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-20); } .dn-pi-gmb__card ul { list-style: none; padding: 0; line-height: 2; } .dn-pi-heatmap { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); margin-bottom: var(--dn-pi-space-32); } .dn-pi-heatmap h3 { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-20); } .dn-pi-heatmap p { line-height: 1.8; margin-bottom: var(--dn-pi-space-20); color: var(--dn-pi-black); } .dn-pi-heatmap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dn-pi-space-12); } .dn-pi-heatmap__zone { padding: var(--dn-pi-space-8) var(--dn-pi-space-12); border-radius: var(--dn-pi-radius-sm); text-align: center; font-weight: 600; color: var(--dn-pi-white); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-pi-heatmap__zone--primary { background: var(--dn-pi-primary); } .dn-pi-heatmap__zone--secondary { background: var(--dn-pi-blue); } .dn-pi-heatmap__zone--tertiary { background: var(--dn-pi-secondary); } .dn-pi-heatmap__legend { margin-top: var(--dn-pi-space-16); font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); } .dn-pi-spanish { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.8s both; } .dn-pi-spanish__content { background: var(--dn-pi-white); padding: var(--dn-pi-space-40); border-radius: var(--dn-pi-radius-lg); box-shadow: var(--dn-pi-shadow-sm); } .dn-pi-spanish__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-40); } .dn-pi-spanish__stat { text-align: center; } .dn-pi-spanish__value { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; color: var(--dn-pi-primary); } .dn-pi-spanish__label { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-pi-spanish__subtitle { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-20); } .dn-pi-spanish__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-pi-space-24); } .dn-pi-spanish__card { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); } .dn-pi-spanish__card h4 { color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-16); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-pi-spanish__card ul { list-style: none; padding: 0; line-height: 1.8; } .dn-pi-cases { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.9s both; } .dn-pi-case { background: var(--dn-pi-white); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-40); box-shadow: var(--dn-pi-shadow-lg); border-top: 4px solid var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-40); } .dn-pi-case__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--dn-pi-space-32); flex-wrap: wrap; gap: var(--dn-pi-space-20); } .dn-pi-case__header h3 { color: var(--dn-pi-dark); font-size: clamp(1.5rem, 2vw, 1.75rem); margin: 0; } .dn-pi-case__badges { display: flex; gap: var(--dn-pi-space-8); } .dn-pi-case__image { margin: var(--dn-pi-space-32) 0; } .dn-pi-case__image img { width: 100%; max-width: 600px; height: auto; border-radius: var(--dn-pi-radius-md); } .dn-pi-testimonial { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); margin-bottom: var(--dn-pi-space-32); } .dn-pi-testimonial p { font-style: italic; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin: 0; color: var(--dn-pi-black); } .dn-pi-testimonial__author { margin-top: var(--dn-pi-space-16); font-weight: 600; } .dn-pi-case__subtitle { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-20); } .dn-pi-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-pi-space-20); margin-bottom: var(--dn-pi-space-32); } .dn-pi-metric { text-align: center; padding: var(--dn-pi-space-20); background: var(--dn-pi-white); border: 2px solid var(--dn-pi-gray-200); border-radius: var(--dn-pi-radius-md); } .dn-pi-metric__label { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); margin-bottom: var(--dn-pi-space-8); } .dn-pi-metric__value { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; } .dn-pi-metric__value--negative { color: var(--dn-pi-accent); } .dn-pi-metric__value--positive { color: var(--dn-pi-primary); } .dn-pi-metric__value--highlight { color: var(--dn-pi-blue); } .dn-pi-metric__desc { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-pi-case__text { line-height: 1.8; margin-bottom: var(--dn-pi-space-16); color: var(--dn-pi-black); } .dn-pi-case__results { line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-32); padding-left: 0; list-style: none; } .dn-pi-link { color: var(--dn-pi-primary); text-decoration: none; font-weight: 600; transition: var(--dn-pi-transition); } .dn-pi-link:hover { color: var(--dn-pi-blue); text-decoration: underline; } .dn-pi-timeline { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1s both; } .dn-pi-timeline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-pi-space-32); } .dn-pi-timeline__phase { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); border-left: 5px solid; } .dn-pi-timeline__phase--primary { border-color: var(--dn-pi-primary); } .dn-pi-timeline__phase--secondary { border-color: var(--dn-pi-blue); } .dn-pi-timeline__phase--tertiary { border-color: var(--dn-pi-secondary); } .dn-pi-timeline__phase h3 { color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-20); } .dn-pi-timeline__list { list-style: none; padding: 0; margin-bottom: var(--dn-pi-space-20); line-height: 1.8; } .dn-pi-timeline__result { background: #E3F2FD; padding: var(--dn-pi-space-16); border-radius: var(--dn-pi-radius-sm); margin-top: var(--dn-pi-space-20); } .dn-pi-pricing { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.1s both; } .dn-pi-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-32); } .dn-pi-pricing__card { background: var(--dn-pi-white); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-40); box-shadow: var(--dn-pi-shadow-md); border: 2px solid var(--dn-pi-gray-200); position: relative; transition: var(--dn-pi-transition); } .dn-pi-pricing__card:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-pricing__card--featured { border-color: var(--dn-pi-blue); transform: scale(1.05); } .dn-pi-pricing__card--featured:hover { transform: scale(1.05) translateY(-4px); } .dn-pi-pricing__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--dn-pi-accent); color: var(--dn-pi-white); padding: var(--dn-pi-space-8) var(--dn-pi-space-24); border-radius: 20px; font-weight: 700; font-size: clamp(0.75rem, 1vw, 0.875rem); white-space: nowrap; } .dn-pi-pricing__name { font-size: clamp(1.5rem, 2vw, 1.75rem); text-align: center; margin-bottom: var(--dn-pi-space-8); color: var(--dn-pi-dark); } .dn-pi-pricing__desc { text-align: center; color: var(--dn-pi-gray-600); margin-bottom: var(--dn-pi-space-24); } .dn-pi-pricing__amount { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-pi-space-32); color: var(--dn-pi-primary); } .dn-pi-pricing__amount span { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 400; color: var(--dn-pi-gray-600); } .dn-pi-pricing__features { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--dn-pi-space-32); } .dn-pi-pricing__results { padding-top: var(--dn-pi-space-20); border-top: 1px solid var(--dn-pi-gray-200); margin-bottom: var(--dn-pi-space-24); text-align: center; } .dn-pi-pricing__results p { margin: var(--dn-pi-space-4) 0; } .dn-pi-pricing__roi { color: var(--dn-pi-primary); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); margin-top: var(--dn-pi-space-8); } .dn-pi-pricing__help { text-align: center; color: var(--dn-pi-gray-600); } .dn-pi-faq { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.2s both; } .dn-pi-faq__list { max-width: 900px; margin: 0 auto; } .dn-pi-faq__item { background: var(--dn-pi-white); border: 1px solid var(--dn-pi-gray-200); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-20); transition: var(--dn-pi-transition); } .dn-pi-faq__item:hover { box-shadow: var(--dn-pi-shadow-md); } .dn-pi-faq__item h3 { color: var(--dn-pi-primary); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-pi-space-16); } .dn-pi-faq__item p { line-height: 1.8; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-black); } .dn-pi-cta { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); color: var(--dn-pi-white); padding: var(--dn-pi-space-96) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.3s both; } .dn-pi-cta__content { max-width: 900px; margin: 0 auto; text-align: center; } .dn-pi-cta__title { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: var(--dn-pi-space-24); } .dn-pi-cta__highlight { font-size: clamp(1.5rem, 3vw, 1.75rem); color: #FFD700; margin-bottom: var(--dn-pi-space-16); } .dn-pi-cta__text { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-pi-space-40); line-height: 1.8; } .dn-pi-cta__offer { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-pi-space-40); border-radius: var(--dn-pi-radius-lg); margin-bottom: var(--dn-pi-space-40); } .dn-pi-cta__offer h3 { font-size: clamp(1.75rem, 3vw, 2rem); margin-bottom: var(--dn-pi-space-24); } .dn-pi-cta__offer p { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-32); } .dn-pi-cta__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto var(--dn-pi-space-32); line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-pi-cta__urgency { color: #FFD700; margin-bottom: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-pi-cta__note { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-top: var(--dn-pi-space-20); } .dn-pi-cta__note span { color: #FFD700; display: block; margin-top: var(--dn-pi-space-8); } .dn-pi-locations { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.4s both; } .dn-pi-location { margin-bottom: var(--dn-pi-space-64); } .dn-pi-location__title { color: var(--dn-pi-dark); font-size: clamp(1.5rem, 2vw, 1.75rem); text-align: center; margin-bottom: var(--dn-pi-space-40); } .dn-pi-location__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-pi-space-40); align-items: center; } .dn-pi-location__map { border-radius: var(--dn-pi-radius-lg); overflow: hidden; box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-location__map iframe { width: 100%; height: 400px; border: 0; } .dn-pi-location__detail { margin-bottom: var(--dn-pi-space-24); } .dn-pi-location__detail h4 { color: var(--dn-pi-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-8); } .dn-pi-location__detail p { color: var(--dn-pi-gray-600); line-height: 1.8; } .dn-pi-location__detail a { color: var(--dn-pi-primary); text-decoration: none; font-weight: 600; transition: var(--dn-pi-transition); } .dn-pi-location__detail a:hover { color: var(--dn-pi-blue); text-decoration: underline; } .dn-pi-location__detail span { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); display: block; } .dn-pi-location__cta { margin-top: var(--dn-pi-space-20); } .dn-pi-service-area { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); margin-top: var(--dn-pi-space-40); } .dn-pi-service-area h3 { color: var(--dn-pi-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-pi-space-20); } .dn-pi-service-area p { color: var(--dn-pi-gray-600); line-height: 1.8; margin-bottom: var(--dn-pi-space-20); } .dn-pi-service-area__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-pi-space-16); } .dn-pi-service-area__item { background: var(--dn-pi-white); padding: var(--dn-pi-space-16); border-radius: var(--dn-pi-radius-sm); border-left: 3px solid var(--dn-pi-primary); } .dn-pi-service-area__item strong { display: block; margin-bottom: var(--dn-pi-space-4); color: var(--dn-pi-dark); } .dn-pi-service-area__item span { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #FFFFFF; --geo-gray-100: #F8F9FA; --geo-gray-200: #E9ECEF; --geo-gray-300: #DEE2E6; --geo-gray-400: #CED4DA; --geo-gray-500: #ADB5BD; --geo-gray-600: #6C757D; --geo-gray-700: #495057; --geo-gray-800: #343A40; --geo-gray-900: #212529; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-spacing-4xl: 96px; --geo-radius: 14px; --geo-radius-sm: 8px; --geo-radius-lg: 20px; --geo-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --geo-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --geo-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --geo-shadow-xl: 0 20px 40px rgba(0,0,0,0.2); --geo-transition: 300ms ease; --geo-transition-fast: 150ms ease; --geo-transition-slow: 500ms ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--geo-black); background-color: var(--geo-white); } @keyframes geoFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .geo_wrapper { overflow-x: hidden; } .geo_hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-4xl) var(--geo-spacing-lg); text-align: center; position: relative; overflow: hidden; } .geo_hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .geo_hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; animation: geoFadeInUp 1s ease; } .geo_hero__label { font-size: clamp(12px, 1.5vw, 14px); text-transform: uppercase; letter-spacing: 3px; color: var(--geo-blue); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .geo_hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: var(--geo-white); margin-bottom: var(--geo-spacing-lg); line-height: 1.2; } .geo_hero__subtitle { font-size: clamp(20px, 3vw, 32px); color: var(--geo-blue); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .geo_hero__description { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,0.9); margin-bottom: var(--geo-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .geo_hero__highlight { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); max-width: 800px; margin: 0 auto; } .geo_hero__highlight p { font-size: clamp(16px, 2vw, 18px); color: var(--geo-white); margin: 0; } .geo_stats { background: linear-gradient(135deg, var(--geo-accent) 0%, #FF6B7A 100%); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); animation: geoFadeInUp 1.2s ease; } .geo_stats__container { max-width: 1200px; margin: 0 auto; } .geo_stats__title { font-size: clamp(24px, 3vw, 36px); color: var(--geo-white); text-align: center; margin-bottom: var(--geo-spacing-2xl); } .geo_stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--geo-spacing-xl); } .geo_stats__item { text-align: center; background: rgba(255,255,255,0.1); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); backdrop-filter: blur(10px); transition: transform var(--geo-transition); } .geo_stats__item:hover { transform: translateY(-5px); } .geo_stats__number { font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--geo-white); margin-bottom: var(--geo-spacing-sm); } .geo_stats__label { font-size: clamp(14px, 1.5vw, 16px); color: rgba(255,255,255,0.9); } .geo_toc { padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); background: var(--geo-gray-100); animation: geoFadeInUp 1.4s ease; } .geo_toc__container { max-width: 1200px; margin: 0 auto; } .geo_toc__title { font-size: clamp(24px, 3vw, 32px); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); } .geo_toc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); box-shadow: var(--geo-shadow-md); } .geo_toc__heading { color: var(--geo-blue); font-weight: 600; margin-bottom: var(--geo-spacing-md); font-size: 14px; letter-spacing: 1px; } .geo_toc__list { list-style: none; padding: 0; } .geo_toc__list li { margin-bottom: var(--geo-spacing-sm); } .geo_toc__list a { color: var(--geo-gray-700); text-decoration: none; transition: color var(--geo-transition); font-size: 15px; } .geo_toc__list a:hover { color: var(--geo-primary); } .geo_toc__list a:focus-visible { outline: 2px solid var(--geo-blue); outline-offset: 2px; border-radius: var(--geo-radius-sm); } .geo_content { padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); background: var(--geo-white); } .geo_content__container { max-width: 900px; margin: 0 auto; } .geo_section { margin-bottom: var(--geo-spacing-4xl); animation: geoFadeInUp 1s ease; } .geo_section__title { font-size: clamp(28px, 3.5vw, 40px); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); line-height: 1.3; font-weight: 700; } .geo_section__subtitle { font-size: clamp(20px, 2.5vw, 28px); color: var(--geo-dark); margin: var(--geo-spacing-2xl) 0 var(--geo-spacing-lg); font-weight: 600; } .geo_section__lead { font-size: clamp(18px, 2vw, 22px); font-weight: 600; color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); line-height: 1.5; } .geo_section p { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.8; margin-bottom: var(--geo-spacing-lg); color: var(--geo-gray-800); } .geo_box { background: var(--geo-gray-100); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .geo_box h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-size: clamp(18px, 2vw, 22px); } .geo_list { list-style: none; padding: 0; line-height: 2; font-size: clamp(15px, 1.8vw, 18px); } .geo_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_comparison__card { padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); border: 2px solid var(--geo-gray-200); } .geo_comparison__card--without { background: #FFF5F5; border-color: var(--geo-accent); } .geo_comparison__card--with { background: #F0F8FF; border-color: var(--geo-blue); } .geo_comparison__card h4 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-md); font-size: clamp(16px, 1.8vw, 20px); } .geo_comparison__question { font-style: italic; margin-bottom: var(--geo-spacing-md); color: var(--geo-gray-700); } .geo_comparison__response { background: var(--geo-white); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); margin-bottom: var(--geo-spacing-md); font-size: 15px; line-height: 1.6; } .geo_comparison__result { font-size: 14px; font-weight: 600; } .geo_comparison__card--without .geo_comparison__result { color: var(--geo-accent); } .geo_comparison__card--with .geo_comparison__result { color: var(--geo-blue); } .geo_callout { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; border-left: 4px solid var(--geo-blue); } .geo_callout p { margin: 0; color: var(--geo-dark); } .geo_table__wrapper { overflow-x: auto; margin: var(--geo-spacing-xl) 0; } .geo_table { width: 100%; border-collapse: collapse; background: var(--geo-white); box-shadow: var(--geo-shadow-lg); border-radius: var(--geo-radius); overflow: hidden; } .geo_table thead { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); } .geo_table th { padding: var(--geo-spacing-lg); text-align: left; color: var(--geo-white); font-weight: 600; font-size: 15px; } .geo_table th.geo_table__highlight { background: rgba(52,142,223,0.3); } .geo_table tbody tr { border-bottom: 1px solid var(--geo-gray-200); } .geo_table tbody tr:nth-child(even) { background: var(--geo-gray-100); } .geo_table td { padding: var(--geo-spacing-lg); font-size: 15px; } .geo_table td.geo_table__highlight { background: rgba(52,142,223,0.05); font-weight: 600; color: var(--geo-primary); } .geo_table__negative { color: var(--geo-accent); } .geo_table__positive { color: #51cf66; } .geo_highlight-box { background: var(--geo-white); border: 2px solid var(--geo-blue); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_highlight-box p { margin-bottom: var(--geo-spacing-lg); } .geo_highlight-box p:last-child { margin-bottom: 0; } .geo_platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_platform { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); box-shadow: var(--geo-shadow-md); border-top: 4px solid var(--geo-blue); transition: transform var(--geo-transition), box-shadow var(--geo-transition); } .geo_platform:hover { transform: translateY(-5px); box-shadow: var(--geo-shadow-xl); } .geo_platform--additional { border-top-color: var(--geo-secondary); } .geo_platform__header { display: flex; align-items: center; margin-bottom: var(--geo-spacing-lg); } .geo_platform__icon { font-size: 48px; margin-right: var(--geo-spacing-lg); } .geo_platform__name { color: var(--geo-dark); margin: 0; font-size: 20px; } .geo_platform__company { color: var(--geo-gray-600); margin: 0; font-size: 14px; } .geo_platform__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--geo-spacing-md); margin-bottom: var(--geo-spacing-lg); } .geo_platform__label { color: var(--geo-gray-600); font-size: 13px; margin: 0; } .geo_platform__value { font-size: 24px; font-weight: 700; color: var(--geo-blue); margin: 0; } .geo_platform__usage { font-size: 15px; line-height: 1.6; margin-bottom: var(--geo-spacing-md); color: var(--geo-gray-700); } .geo_platform__priority { background: var(--geo-gray-100); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); font-size: 14px; } .geo_process { background: linear-gradient(135deg, #F0F8FF 0%, var(--geo-gray-100) 100%); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; } .geo_process h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: clamp(20px, 2.5vw, 24px); } .geo_process__step { background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-lg); box-shadow: var(--geo-shadow-sm); } .geo_process__step h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_process__step p { margin-bottom: var(--geo-spacing-md); font-size: 16px; } .geo_process__step ul { list-style: none; padding-left: 0; line-height: 1.8; } .geo_process__step li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-sm); } .geo_process__step li::before { content: '•'; position: absolute; left: 0; color: var(--geo-blue); } .geo_warning { background: #FFF5F5; padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); border-left: 4px solid var(--geo-accent); margin: var(--geo-spacing-xl) 0; } .geo_warning h3 { color: var(--geo-accent); margin-bottom: var(--geo-spacing-md); font-size: 20px; } .geo_warning p { color: var(--geo-gray-800); margin: 0; line-height: 1.8; } .geo_timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_timeline__card { background: var(--geo-white); border: 2px solid var(--geo-gray-200); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); } .geo_timeline__card--old { border-color: var(--geo-gray-400); } .geo_timeline__card--new { background: linear-gradient(135deg, #F0F8FF 0%, #E3F2FD 100%); border-color: var(--geo-blue); } .geo_timeline__card h4 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-size: 18px; } .geo_timeline__card ol { padding-left: var(--geo-spacing-lg); line-height: 2; font-size: 15px; } .geo_timeline__time { margin-top: var(--geo-spacing-md); font-size: 15px; color: var(--geo-gray-600); } .geo_timeline__card--new .geo_timeline__time { color: var(--geo-blue); font-weight: 600; } .geo_queries { background: var(--geo-gray-100); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .geo_queries h4 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-size: 18px; } .geo_queries ul { list-style: none; padding: 0; line-height: 2; } .geo_queries li { padding: var(--geo-spacing-sm) 0; font-size: 16px; } .geo_queries__note { background: var(--geo-white); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); margin-top: var(--geo-spacing-lg); font-size: 15px; color: var(--geo-gray-700); } .geo_metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--geo-spacing-lg); margin: var(--geo-spacing-2xl) 0; } .geo_metric { text-align: center; background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); box-shadow: var(--geo-shadow-md); transition: transform var(--geo-transition); } .geo_metric:hover { transform: translateY(-5px); } .geo_metric__value { font-size: clamp(36px, 4vw, 48px); font-weight: 800; color: var(--geo-blue); margin-bottom: var(--geo-spacing-sm); } .geo_metric__label { font-size: 14px; color: var(--geo-gray-600); } .geo_trust { background: var(--geo-white); border: 2px solid var(--geo-blue); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; } .geo_trust h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: 22px; text-align: center; } .geo_trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--geo-spacing-xl); } .geo_trust__item h4 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_trust__rate { background: var(--geo-gray-100); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); margin-bottom: var(--geo-spacing-sm); text-align: center; } .geo_trust__percentage { font-size: 36px; font-weight: 800; } .geo_trust__rate--low .geo_trust__percentage { color: var(--geo-accent); } .geo_trust__rate--medium .geo_trust__percentage { color: #ff9f43; } .geo_trust__rate--high .geo_trust__percentage { color: #51cf66; } .geo_trust__rate--highest { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); border: 2px solid var(--geo-blue); } .geo_trust__rate--highest .geo_trust__percentage { color: var(--geo-blue); } .geo_trust__item p { font-size: 14px; color: var(--geo-gray-600); line-height: 1.6; } .geo_reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_reason { background: var(--geo-gray-100); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: transform var(--geo-transition); } .geo_reason:hover { transform: translateY(-3px); } .geo_reason h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_reason p { font-size: 15px; line-height: 1.8; color: var(--geo-gray-700); margin: 0; } .geo_calculator { background: linear-gradient(135deg, var(--geo-accent) 0%, #FF6B7A 100%); color: var(--geo-white); padding: var(--geo-spacing-2xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; text-align: center; } .geo_calculator h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--geo-spacing-xl); } .geo_calculator__main { background: rgba(255,255,255,0.95); color: var(--geo-dark); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); } .geo_calculator__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center; gap: var(--geo-spacing-lg); text-align: center; } .geo_calculator__item p { color: var(--geo-gray-600); margin-bottom: var(--geo-spacing-sm); font-size: 14px; } .geo_calculator__value { font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--geo-dark); } .geo_calculator__value--loss { color: var(--geo-accent); } .geo_calculator__value--total { color: var(--geo-accent); } .geo_calculator__operator { font-size: 36px; color: var(--geo-gray-400); } .geo_calculator__secondary { background: var(--geo-gray-100); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); margin-top: var(--geo-spacing-xl); } .geo_calculator__annual { font-size: clamp(18px, 2vw, 22px); margin-top: var(--geo-spacing-xl); font-weight: 600; } .geo_warning--severe { background: #FFF5F5; border-color: var(--geo-accent); } .geo_warning--severe p { font-size: 16px; line-height: 1.8; } .geo_warning--severe p:first-child { font-size: 18px; margin-bottom: var(--geo-spacing-lg); } .geo_banner { background: linear-gradient(135deg, var(--geo-blue) 0%, #00d4ff 100%); color: var(--geo-white); padding: var(--geo-spacing-2xl); border-radius: var(--geo-radius); text-align: center; margin: var(--geo-spacing-xl) 0; } .geo_banner h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--geo-spacing-md); } .geo_banner p { font-size: clamp(16px, 2vw, 20px); margin: 0; } .geo_advantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_advantage { background: var(--geo-white); border: 2px solid var(--geo-blue); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); transition: transform var(--geo-transition), box-shadow var(--geo-transition); } .geo_advantage:hover { transform: translateY(-5px); box-shadow: var(--geo-shadow-lg); } .geo_advantage h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_advantage p { font-size: 15px; line-height: 1.8; color: var(--geo-gray-700); margin: 0; } .geo_timeline-box { background: #E8F5E9; padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .geo_timeline-box h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-size: 22px; } .geo_timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--geo-spacing-lg); } .geo_timeline-label { font-weight: 600; color: #51cf66; margin-bottom: var(--geo-spacing-sm); } .geo_timeline-grid ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_timeline-grid li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-xs); } .geo_timeline-grid li::before { content: '•'; position: absolute; left: 0; color: #51cf66; } .geo_pillars { background: var(--geo-white); border: 2px solid var(--geo-gray-200); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; } .geo_pillars h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: 24px; } .geo_pillar { background: var(--geo-gray-100); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-lg); transition: transform var(--geo-transition); } .geo_pillar:hover { transform: translateX(5px); } .geo_pillar h4 { color: var(--geo-blue); font-size: 22px; margin-bottom: var(--geo-spacing-lg); } .geo_pillar p { margin-bottom: var(--geo-spacing-md); font-size: 16px; line-height: 1.8; } .geo_pillar ul { list-style: none; padding-left: var(--geo-spacing-lg); line-height: 1.8; margin-bottom: var(--geo-spacing-md); } .geo_pillar li { position: relative; margin-bottom: var(--geo-spacing-sm); font-size: 15px; } .geo_pillar__impact { background: var(--geo-white); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); margin-top: var(--geo-spacing-md); font-size: 15px; } .geo_schema { background: var(--geo-gray-100); padding: var(--geo-spacing-2xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .geo_schema h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: 22px; } .geo_code { background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); font-family: 'Courier New', monospace; font-size: 14px; overflow-x: auto; margin-bottom: var(--geo-spacing-lg); border: 1px solid var(--geo-gray-300); } .geo_schema p { font-size: 16px; line-height: 1.8; } .geo_schema a { color: var(--geo-blue); text-decoration: none; transition: color var(--geo-transition); } .geo_schema a:hover { color: var(--geo-primary); text-decoration: underline; } .geo_schema a:focus-visible { outline: 2px solid var(--geo-blue); outline-offset: 2px; border-radius: var(--geo-radius-sm); } .geo_content-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; } .geo_content-card { background: var(--geo-white); border: 2px solid; border-radius: var(--geo-radius); padding: var(--geo-spacing-lg); } .geo_content-card--good { border-color: var(--geo-blue); background: #F0F8FF; } .geo_content-card--bad { border-color: var(--geo-accent); background: #FFF5F5; } .geo_content-card h4 { margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_content-card--good h4 { color: var(--geo-blue); } .geo_content-card--bad h4 { color: var(--geo-accent); } .geo_content-card ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_content-card li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-sm); } .geo_content-card li::before { content: '•'; position: absolute; left: 0; } .geo_content-card--good li::before { color: var(--geo-blue); } .geo_content-card--bad li::before { color: var(--geo-accent); } .geo_metrics-box { background: var(--geo-white); border: 2px solid var(--geo-blue); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; } .geo_metrics-box h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: 22px; } .geo_metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--geo-spacing-xl); margin-bottom: var(--geo-spacing-xl); } .geo_metrics-grid h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_metrics-grid ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_metrics-grid li { margin-bottom: var(--geo-spacing-sm); } .geo_checklist { background: var(--geo-gray-100); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); } .geo_checklist h4 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_checklist ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_checklist li { margin-bottom: var(--geo-spacing-sm); } .geo_action-plan { background: linear-gradient(135deg, #E3F2FD 0%, var(--geo-gray-100) 100%); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; } .geo_action-plan h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-size: 24px; } .geo_step { background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-lg); border-left: 4px solid; transition: transform var(--geo-transition); } .geo_step:nth-child(2) { border-color: var(--geo-blue); } .geo_step:nth-child(3) { border-color: #00d4ff; } .geo_step:nth-child(4) { border-color: #51cf66; } .geo_step:hover { transform: translateX(5px); } .geo_step h4 { margin-bottom: var(--geo-spacing-md); font-size: 20px; } .geo_step:nth-child(2) h4 { color: var(--geo-blue); } .geo_step:nth-child(3) h4 { color: #00d4ff; } .geo_step:nth-child(4) h4 { color: #51cf66; } .geo_step ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_step li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-sm); } .geo_step li::before { content: '•'; position: absolute; left: 0; color: var(--geo-gray-600); } .geo_warning--diy { background: #FFF5F5; border-color: var(--geo-accent); padding: var(--geo-spacing-xl); } .geo_warning--diy h3 { color: var(--geo-accent); margin-bottom: var(--geo-spacing-md); font-size: 20px; } .geo_warning--diy ul { list-style: none; padding: 0; line-height: 1.8; margin-bottom: var(--geo-spacing-lg); font-size: 15px; } .geo_warning--diy li { margin-bottom: var(--geo-spacing-sm); } .geo_warning--diy p { font-size: 16px; margin: 0; } .geo_cases { background: var(--geo-gray-100); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); animation: geoFadeInUp 1.6s ease; } .geo_cases__container { max-width: 1200px; margin: 0 auto; } .geo_cases__title { font-size: clamp(28px, 3.5vw, 40px); color: var(--geo-dark); text-align: center; margin-bottom: var(--geo-spacing-2xl); } .geo_cases__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--geo-spacing-2xl); margin-bottom: var(--geo-spacing-2xl); } .geo_case { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow-lg); transition: transform var(--geo-transition), box-shadow var(--geo-transition); } .geo_case:hover { transform: translateY(-10px); box-shadow: var(--geo-shadow-xl); } .geo_case__tag { background: linear-gradient(135deg, var(--geo-blue) 0%, #00d4ff 100%); color: var(--geo-white); padding: var(--geo-spacing-sm) var(--geo-spacing-lg); border-radius: 50px; display: inline-block; margin-bottom: var(--geo-spacing-lg); font-size: 14px; font-weight: 600; } .geo_case:nth-child(2) .geo_case__tag { background: linear-gradient(135deg, #51cf66 0%, var(--geo-blue) 100%); } .geo_case:nth-child(3) .geo_case__tag { background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%); } .geo_case h3 { color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-size: 20px; } .geo_case__before { margin-bottom: var(--geo-spacing-lg); } .geo_case__before p { color: var(--geo-gray-600); margin-bottom: var(--geo-spacing-sm); font-size: 14px; } .geo_case__before ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_case__before li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-xs); } .geo_case__before li::before { content: '•'; position: absolute; left: 0; color: var(--geo-gray-500); } .geo_case__after { margin-bottom: var(--geo-spacing-lg); } .geo_case__after p { color: var(--geo-blue); margin-bottom: var(--geo-spacing-sm); font-size: 14px; font-weight: 600; } .geo_case__after ul { list-style: none; padding: 0; line-height: 1.8; font-size: 15px; } .geo_case__after li { position: relative; padding-left: var(--geo-spacing-lg); margin-bottom: var(--geo-spacing-xs); } .geo_case__after li::before { content: '•'; position: absolute; left: 0; color: var(--geo-blue); } .geo_case__result { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); text-align: center; font-size: 24px; font-weight: 700; color: var(--geo-blue); } .geo_case:nth-child(2) .geo_case__result { background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%); color: #51cf66; } .geo_case:nth-child(3) .geo_case__result { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); color: #ff9f43; } .geo_cases__cta { text-align: center; } .geo_button { display: inline-block; padding: var(--geo-spacing-md) var(--geo-spacing-2xl); border-radius: var(--geo-radius); text-decoration: none; font-weight: 600; transition: all var(--geo-transition); border: none; cursor: pointer; } .geo_button--primary { background: linear-gradient(135deg, var(--geo-blue) 0%, #00d4ff 100%); color: var(--geo-white); } .geo_button--primary:hover { transform: translateY(-2px); box-shadow: var(--geo-shadow-lg); } .geo_button--primary:focus-visible { outline: 3px solid var(--geo-blue); outline-offset: 3px; } .geo_button--secondary { background: var(--geo-blue); color: var(--geo-white); font-size: 18px; } .geo_button--secondary:hover { background: var(--geo-primary); transform: translateY(-2px); } .geo_button--secondary:focus-visible { outline: 3px solid var(--geo-blue); outline-offset: 3px; } .geo_button--large { padding: var(--geo-spacing-lg) var(--geo-spacing-3xl); font-size: clamp(20px, 2.5vw, 28px); } .geo_faq { background: var(--geo-white); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); animation: geoFadeInUp 1.8s ease; } .geo_faq__container { max-width: 900px; margin: 0 auto; } .geo_faq__title { font-size: clamp(28px, 3.5vw, 40px); color: var(--geo-dark); text-align: center; margin-bottom: var(--geo-spacing-2xl); } .geo_faq__item { background: var(--geo-gray-100); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin-bottom: var(--geo-spacing-lg); transition: transform var(--geo-transition); } .geo_faq__item:hover { transform: translateX(5px); } .geo_faq__item h3 { color: var(--geo-dark); font-size: 22px; margin-bottom: var(--geo-spacing-md); } .geo_faq__item p { font-size: 18px; line-height: 1.8; color: var(--geo-gray-800); margin: 0; } .geo_cta { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-4xl) var(--geo-spacing-lg); text-align: center; color: var(--geo-white); animation: geoFadeInUp 2s ease; position: relative; overflow: hidden; } .geo_cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 40s linear infinite; } .geo_cta__container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .geo_cta h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: var(--geo-spacing-lg); } .geo_cta__subtitle { font-size: clamp(20px, 2.5vw, 28px); color: var(--geo-blue); margin-bottom: var(--geo-spacing-sm); font-weight: 600; } .geo_cta__text { font-size: clamp(16px, 2vw, 20px); margin-bottom: var(--geo-spacing-2xl); line-height: 1.8; } .geo_cta__box { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: var(--geo-spacing-2xl); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-2xl); } .geo_cta__box h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--geo-spacing-xl); } .geo_cta__box p { font-size: 18px; margin-bottom: var(--geo-spacing-xl); } .geo_cta__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto var(--geo-spacing-xl); line-height: 2; font-size: 18px; } .geo_cta__offer { color: var(--geo-blue); margin-bottom: var(--geo-spacing-lg); font-size: 16px; } .geo_cta__note { font-size: 18px; margin-top: var(--geo-spacing-lg); } .geo_cta__note span { display: block; color: var(--geo-blue); } .geo_cta__disclaimer { margin-top: var(--geo-spacing-2xl); padding-top: var(--geo-spacing-2xl); border-top: 1px solid rgba(255,255,255,0.2); } .geo_cta__disclaimer p { font-size: 16px; line-height: 1.8; margin: 0; } .geo_resources { background: var(--geo-gray-100); padding: var(--geo-spacing-2xl) var(--geo-spacing-lg); animation: geoFadeInUp 2.2s ease; } .geo_resources__container { max-width: 1200px; margin: 0 auto; } .geo_resources h3 { color: var(--geo-dark); text-align: center; margin-bottom: var(--geo-spacing-xl); font-size: clamp(24px, 3vw, 32px); } .geo_resources__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--geo-spacing-lg); } .geo_resources__item h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-sm); font-size: 18px; } .geo_resources__item p { color: var(--geo-gray-600); font-size: 14px; margin: 0; } .geo_footer { background: var(--geo-dark); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); color: var(--geo-white); animation: geoFadeInUp 2.4s ease; } .geo_footer__container { max-width: 1200px; margin: 0 auto; } .geo_footer__header { text-align: center; margin-bottom: var(--geo-spacing-2xl); } .geo_footer__header h3 { font-size: 28px; margin-bottom: var(--geo-spacing-sm); } .geo_footer__header p { font-size: 18px; color: #b8c5d6; margin: 0; } .geo_footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--geo-spacing-2xl); margin-bottom: var(--geo-spacing-2xl); } .geo_footer__grid h4 { color: var(--geo-blue); margin-bottom: var(--geo-spacing-md); font-size: 18px; } .geo_footer__grid p { line-height: 1.8; font-size: 15px; margin: 0; } .geo_footer__grid a { color: var(--geo-white); text-decoration: none; transition: color var(--geo-transition); display: block; } .geo_footer__grid a:hover { color: var(--geo-blue); } .geo_footer__grid a:focus-visible { outline: 2px solid var(--geo-blue); outline-offset: 2px; border-radius: var(--geo-radius-sm); } .geo_footer__highlight { color: var(--geo-blue); font-weight: 600; display: block; margin-top: var(--geo-spacing-sm); } .geo_footer__bottom { text-align: center; padding-top: var(--geo-spacing-xl); border-top: 1px solid rgba(255,255,255,0.1); } .geo_footer__bottom p { color: #888; font-size: 14px; line-height: 1.8; margin: 0; } @media (max-width: 768px) { .geo_table { font-size: 14px; } .geo_table th, .geo_table td { padding: var(--geo-spacing-md); } .geo_calculator__operator { font-size: 24px; } .geo_platforms, .geo_cases__grid, .geo_timeline, .geo_comparison, .geo_advantages, .geo_reasons, .geo_content-comparison, .geo_metrics-grid, .geo_timeline-grid { grid-template-columns: 1fr; } } :root { --seo-primary: #194A9A; --seo-secondary: #2F62AD; --seo-blue: #348EDF; --seo-accent: #DF4756; --seo-dark: #011F4E; --seo-black: #000000; --seo-white: #FFFFFF; --seo-gray-50: #F9FAFB; --seo-gray-100: #F3F4F6; --seo-gray-200: #E5E7EB; --seo-gray-300: #D1D5DB; --seo-gray-400: #9CA3AF; --seo-gray-500: #6B7280; --seo-gray-600: #4B5563; --seo-gray-700: #374151; --seo-gray-800: #1F2937; --seo-gray-900: #111827; --seo-spacing-xs: 4px; --seo-spacing-sm: 8px; --seo-spacing-md: 16px; --seo-spacing-lg: 24px; --seo-spacing-xl: 32px; --seo-spacing-2xl: 48px; --seo-spacing-3xl: 64px; --seo-spacing-4xl: 96px; --seo-radius: 14px; --seo-radius-sm: 8px; --seo-radius-lg: 20px; --seo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --seo-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --seo-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --seo-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --seo-transition: 300ms ease; --seo-transition-fast: 150ms ease; } * { margin: 0; padding: 0; box-sizing: border-box; } @keyframes seoFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .seo-wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--seo-gray-900); background: var(--seo-white); } .seo-hero { background: linear-gradient(135deg, var(--seo-dark) 0%, var(--seo-primary) 100%); padding: clamp(var(--seo-spacing-3xl), 8vw, var(--seo-spacing-4xl)) var(--seo-spacing-lg); text-align: center; position: relative; overflow: hidden; } .seo-hero::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .seo-hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; align-items:center!important; animation: seoFadeInUp 0.8s ease; } .seo-hero__badge { display:; align-items: center!important; gap: var(--seo-spacing-sm); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--seo-spacing-sm) var(--seo-spacing-md); border-radius: var(--seo-radius); margin-bottom: var(--seo-spacing-xl); } .seo-hero__badge-img { height:38px!important; width: auto; } .seo-hero__badge-text { color: var(--seo-white); font-size: clamp(14px, 1.5vw, 16px); font-weight: 500; } .seo-hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: var(--seo-white); margin-bottom: var(--seo-spacing-lg); line-height: 1.2; } .seo-hero__subtitle { font-size: clamp(18px, 2.5vw, 24px); color: var(--seo-blue); font-weight: 500; max-width: 800px; margin: 0 auto; } .seo-content { background: var(--seo-gray-50); padding: var(--seo-spacing-3xl) 0; } .seo-content__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--seo-spacing-lg); } .seo-toc { background: var(--seo-white); border-radius: var(--seo-radius); padding: var(--seo-spacing-2xl); margin-bottom: var(--seo-spacing-3xl); box-shadow: var(--seo-shadow); animation: seoFadeInUp 1s ease; } .seo-toc__title { font-size: clamp(24px, 3vw, 32px); color: var(--seo-dark); margin-bottom: var(--seo-spacing-xl); font-weight: 700; } .seo-toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--seo-spacing-md); list-style: none; } .seo-toc__item { padding: 0; } .seo-toc__link { color: var(--seo-gray-700); text-decoration: none; padding: var(--seo-spacing-sm); display: block; border-radius: var(--seo-radius-sm); transition: all var(--seo-transition); font-size: clamp(14px, 1.5vw, 16px); } .seo-toc__link:hover { background: var(--seo-gray-100); color: var(--seo-primary); transform: translateX(4px); } .seo-toc__link:focus-visible { outline: 2px solid var(--seo-blue); outline-offset: 2px; } .seo-section { background: var(--seo-white); border-radius: var(--seo-radius); padding: var(--seo-spacing-2xl); margin-bottom: var(--seo-spacing-2xl); box-shadow: var(--seo-shadow); animation: seoFadeInUp 1.2s ease; } .seo-section__title { font-size: clamp(28px, 3.5vw, 36px); color: var(--seo-dark); margin-bottom: var(--seo-spacing-xl); font-weight: 700; padding-bottom: var(--seo-spacing-md); border-bottom: 2px solid var(--seo-gray-200); } .seo-section__subtitle { font-size: clamp(20px, 2.5vw, 24px); color: var(--seo-primary); margin: var(--seo-spacing-xl) 0 var(--seo-spacing-lg); font-weight: 600; } .seo-section p { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.8; color: var(--seo-gray-700); margin-bottom: var(--seo-spacing-lg); } .seo-section h4 { font-size: clamp(16px, 2vw, 18px); color: var(--seo-dark); margin: var(--seo-spacing-lg) 0 var(--seo-spacing-md); font-weight: 600; } .seo-insight { background: linear-gradient(135deg, #F0F7FF 0%, #E6F3FF 100%); border-left: 4px solid var(--seo-blue); border-radius: var(--seo-radius); padding: var(--seo-spacing-lg); margin: var(--seo-spacing-xl) 0; } .seo-insight__title { font-size: clamp(18px, 2vw, 20px); color: var(--seo-primary); margin-bottom: var(--seo-spacing-md); font-weight: 700; } .seo-insight__text { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.8; color: var(--seo-gray-700); margin: 0; } .seo-insight__link { color: var(--seo-blue); text-decoration: none; font-weight: 600; transition: color var(--seo-transition); } .seo-insight__link:hover { color: var(--seo-primary); text-decoration: underline; } .seo-insight--about { margin-top: var(--seo-spacing-3xl); } .seo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--seo-spacing-lg); margin: var(--seo-spacing-xl) 0; } .seo-card { background: var(--seo-gray-50); border-radius: var(--seo-radius); padding: var(--seo-spacing-xl); text-align: center; transition: all var(--seo-transition); border: 1px solid var(--seo-gray-200); } .seo-card:hover { transform: translateY(-5px); box-shadow: var(--seo-shadow-lg); border-color: var(--seo-blue); } .seo-card__icon { font-size: 48px; margin-bottom: var(--seo-spacing-md); display: block; } .seo-card__title { font-size: clamp(18px, 2vw, 20px); color: var(--seo-primary); margin-bottom: var(--seo-spacing-md); font-weight: 700; } .seo-card__text { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.7; color: var(--seo-gray-600); margin: 0; } .seo-table-wrapper { overflow-x: auto; margin: var(--seo-spacing-xl) 0; } .seo-table { width: 100%; border-collapse: collapse; background: var(--seo-white); border-radius: var(--seo-radius); overflow: hidden; box-shadow: var(--seo-shadow); } .seo-table thead { background: var(--seo-primary); } .seo-table th { padding: var(--seo-spacing-md); text-align: left; color: var(--seo-white); font-weight: 600; font-size: clamp(14px, 1.6vw, 16px); } .seo-table tbody tr { border-bottom: 1px solid var(--seo-gray-200); transition: background var(--seo-transition); } .seo-table tbody tr:hover { background: var(--seo-gray-50); } .seo-table td { padding: var(--seo-spacing-md); font-size: clamp(14px, 1.6vw, 16px); color: var(--seo-gray-700); } .seo-table__highlight { background: linear-gradient(90deg, #FFF9E6 0%, #FFF5CC 100%); } .seo-table__highlight td { font-weight: 600; } .seo-steps { margin: var(--seo-spacing-xl) 0; } .seo-step { display: flex; gap: var(--seo-spacing-lg); margin-bottom: var(--seo-spacing-xl); align-items: flex-start; } .seo-step__number { flex-shrink: 0; width: 48px; height: 48px; background: var(--seo-blue); color: var(--seo-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .seo-step__content { flex: 1; } .seo-step__title { font-size: clamp(18px, 2vw, 20px); color: var(--seo-dark); margin-bottom: var(--seo-spacing-sm); font-weight: 700; } .seo-step__text { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.8; color: var(--seo-gray-600); margin: 0; } .seo-checklist { list-style: none; margin: var(--seo-spacing-lg) 0; } .seo-checklist__item { padding: var(--seo-spacing-sm) 0; padding-left: var(--seo-spacing-xl); position: relative; font-size: clamp(14px, 1.6vw, 16px); color: var(--seo-gray-700); line-height: 1.8; } .seo-checklist__item--check::before { content: '✓'; position: absolute; left: 0; top: var(--seo-spacing-sm); width: 24px; height: 24px; background: var(--seo-blue); color: var(--seo-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; } .seo-roi { background: linear-gradient(135deg, var(--seo-gray-50) 0%, var(--seo-white) 100%); border-radius: var(--seo-radius); padding: var(--seo-spacing-2xl); margin: var(--seo-spacing-xl) 0; box-shadow: var(--seo-shadow); } @media (max-width: 768px) { .seo-roi { padding: var(--seo-spacing-1xl); } } .seo-roi__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--seo-dark); margin-bottom: var(--seo-spacing-xl); text-align: center; font-weight: 700; } .seo-roi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--seo-spacing-xl); } .seo-roi__column { background: var(--seo-white); border-radius: var(--seo-radius); padding: var(--seo-spacing-lg); border: 2px solid var(--seo-gray-200); } .seo-roi__column--current { border-color: var(--seo-accent); background: linear-gradient(135deg, #FFF5F5 0%, var(--seo-white) 100%); } .seo-roi__column--improved { border-color: var(--seo-blue); background: linear-gradient(135deg, #F0F7FF 0%, var(--seo-white) 100%); } .seo-roi__heading { font-size: clamp(16px, 2vw, 18px); color: var(--seo-dark); margin-bottom: var(--seo-spacing-lg); text-align: center; font-weight: 700; } .seo-roi__metric { display: flex; justify-content: space-between; padding: var(--seo-spacing-sm) 0; border-bottom: 1px solid var(--seo-gray-100); } .seo-roi__metric--highlight { background: var(--seo-gray-50); padding: var(--seo-spacing-md); border-radius: var(--seo-radius-sm); margin-top: var(--seo-spacing-md); border: none; font-weight: 700; } .seo-roi__label { font-size: clamp(14px, 1.6vw, 16px); color: var(--seo-gray-600); } .seo-roi__value { font-size: clamp(14px, 1.6vw, 16px); color: var(--seo-dark); font-weight: 600; } .seo-roi__metric--highlight .seo-roi__value { color: var(--seo-blue); font-size: clamp(18px, 2vw, 20px); } .seo-map { margin: var(--seo-spacing-xl) 0; border-radius: var(--seo-radius); overflow: hidden; box-shadow: var(--seo-shadow); } .seo-map iframe { width: 100%; height: 400px; border: none; } .seo-faqs { margin: var(--seo-spacing-xl) 0; } .seo-faq { background: var(--seo-gray-50); border-radius: var(--seo-radius); padding: var(--seo-spacing-lg); margin-bottom: var(--seo-spacing-lg); border: 1px solid var(--seo-gray-200); transition: all var(--seo-transition); } .seo-faq:hover { border-color: var(--seo-blue); box-shadow: var(--seo-shadow); } .seo-faq__question { font-size: clamp(18px, 2vw, 20px); color: var(--seo-primary); margin-bottom: var(--seo-spacing-md); font-weight: 700; } .seo-faq__answer { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.8; color: var(--seo-gray-700); } .seo-cta-section { margin-top: var(--seo-spacing-3xl); } .seo-cta { background: linear-gradient(135deg, var(--seo-dark) 0%, var(--seo-primary) 100%); border-radius: var(--seo-radius); padding: var(--seo-spacing-3xl); text-align: center; color: var(--seo-white); position: relative; overflow: hidden; } .seo-cta::before { content: ''; position: absolute; top: -50%; left: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .seo-cta > * { position: relative; z-index: 1; } .seo-cta__title { font-size: clamp(28px, 3.5vw, 36px); margin-bottom: var(--seo-spacing-md); font-weight: 800; } .seo-cta__subtitle { font-size: clamp(20px, 2.5vw, 24px); margin-bottom: var(--seo-spacing-md); color: var(--seo-blue); font-weight: 600; } .seo-cta__text { font-size: clamp(16px, 2vw, 18px); margin-bottom: var(--seo-spacing-xl); max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.8; } .seo-cta__button { display: inline-block; background: var(--seo-accent); color: var(--seo-white); padding: var(--seo-spacing-md) var(--seo-spacing-xl); border-radius: var(--seo-radius); font-size: clamp(16px, 2vw, 18px); font-weight: 700; text-decoration: none; transition: all var(--seo-transition); box-shadow: 0 4px 15px rgba(223, 71, 86, 0.3); } .seo-cta__button:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223, 71, 86, 0.4); } .seo-cta__button:focus-visible { outline: 3px solid var(--seo-blue); outline-offset: 3px; } .seo-cta__contact { margin-top: var(--seo-spacing-xl); font-size: clamp(14px, 1.8vw, 16px); line-height: 2; } .seo-cta__phone { color: var(--seo-blue); text-decoration: underline; transition: color var(--seo-transition); } .seo-cta__phone:hover { color: var(--seo-white); } @media (max-width: 768px) { .seo-content__container { padding: 0 var(--seo-spacing-md); } .seo-section { padding: var(--seo-spacing-lg); } .seo-table { font-size: 14px; } .seo-table th, .seo-table td { padding: var(--seo-spacing-sm); } .seo-cards { grid-template-columns: 1fr; } .seo-roi__grid { grid-template-columns: 1fr; } .seo-step { flex-direction: column; text-align: center; } .seo-step__number { margin: 0 auto; } .seo-map iframe { height: 300px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-100: #f8f9fa; --dn-gray-200: #e9ecef; --dn-gray-300: #dee2e6; --dn-gray-600: #6c757d; --dn-gray-700: #495057; --dn-gray-800: #343a40; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --dn-shadow-md: 0 4px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --dn-shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --dn-transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .dn_case-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: 80px 20px; text-align: center; animation: fadeInUp 0.8s ease; } .dn_case-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; max-width: 1200px; margin: 0 auto; } .dn_case-main { background: var(--dn-gray-100); padding: 40px 0; } .dn_case-section { background: var(--dn-white); border-radius: var(--dn-radius); margin-bottom: 30px; padding: 40px; animation: fadeInUp 0.8s ease; animation-fill-mode: both; } .dn_case-section:nth-child(1) { animation-delay: 0.1s; } .dn_case-section:nth-child(2) { animation-delay: 0.2s; } .dn_case-section:nth-child(3) { animation-delay: 0.3s; } .dn_case-section:nth-child(4) { animation-delay: 0.4s; } .dn_case-section:nth-child(5) { animation-delay: 0.5s; } .dn_case-section--highlight { background: var(--dn-primary); color: var(--dn-white); padding: 0; overflow: hidden; } .dn_case-highlight { padding: 50px; } .dn_case-highlight__title { color: var(--dn-white); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 30px; border: none; } .dn_case-highlight__text { font-size: 1.125rem; line-height: 1.8; margin-bottom: 20px; opacity: 0.95; } .dn_case-section__title { color: var(--dn-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 40px; text-align: center; } .dn_case-section__subtitle { color: var(--dn-primary); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; margin-bottom: 20px; } .dn_case-section__text { color: var(--dn-gray-700); font-size: 1.125rem; line-height: 1.8; margin-bottom: 20px; } .dn_case-metric { color: var(--dn-accent); font-weight: 700; } .dn_case-strategy { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dn_case-strategy__item { background: var(--dn-gray-100); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius); padding: 30px; transition: var(--dn-transition); } .dn_case-strategy__item:hover { box-shadow: var(--dn-shadow-md); transform: translateY(-3px); } .dn_case-strategy__title { color: var(--dn-primary); font-size: 1.25rem; font-weight: 700; margin-bottom: 15px; } .dn_case-strategy__desc { color: var(--dn-gray-700); margin-bottom: 20px; } .dn_case-strategy__list { list-style: none; padding: 0; } .dn_case-strategy__list li { color: var(--dn-gray-700); line-height: 1.8; margin-bottom: 12px; padding-left: 25px; position: relative; } .dn_case-strategy__list li::before { content: "✓"; color: var(--dn-blue); font-weight: 700; position: absolute; left: 0; } .dn_case-stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .dn_case-stats__item { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); border-radius: var(--dn-radius); color: var(--dn-white); padding: 30px; text-align: center; transition: var(--dn-transition); } .dn_case-stats__item:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_case-stats__number { display: block; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; } .dn_case-stats__label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .dn_case-ai-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 30px; } .dn_case-ai-grid__item { background: var(--dn-gray-100); border-radius: var(--dn-radius); padding: 25px; text-align: center; transition: var(--dn-transition); } .dn_case-ai-grid__item:hover { box-shadow: var(--dn-shadow-md); transform: translateY(-3px); } .dn_case-ai-badge { background: linear-gradient(135deg, var(--dn-blue), var(--dn-secondary)); border-radius: 50px; color: var(--dn-white); display: inline-block; font-size: 0.875rem; font-weight: 600; margin-bottom: 15px; padding: 8px 20px; } .dn_case-ai-grid__title { color: var(--dn-dark); display: block; font-size: 1.125rem; margin-bottom: 5px; } .dn_case-ai-grid__desc { color: var(--dn-gray-600); display: block; font-size: 0.875rem; } .dn_case-section--accent { background: linear-gradient(135deg, var(--dn-accent), #e74c3c); color: var(--dn-white); } .dn_case-insight { text-align: center; } .dn_case-insight__title { color: var(--dn-white); font-size: 2rem; font-weight: 700; margin-bottom: 20px; } .dn_case-insight__text { font-size: 1.25rem; line-height: 1.8; } .dn_case-table-wrapper { overflow-x: auto; } .dn_case-table { background: var(--dn-white); border-collapse: collapse; border-radius: var(--dn-radius); overflow: hidden; width: 100%; } .dn_case-table thead { background: var(--dn-dark); color: var(--dn-white); } .dn_case-table th { padding: 20px; text-align: left; } .dn_case-table td { border-bottom: 1px solid var(--dn-gray-200); padding: 20px; } .dn_case-table__highlight { color: var(--dn-blue); font-weight: 700; } .dn_case-table__negative { color: var(--dn-accent); font-weight: 700; } .dn_case-table__positive { color: #28a745; font-weight: 700; } .dn_case-comparison { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-bottom: 30px; } .dn_case-comparison__before { background: #fff5f5; border-left: 4px solid var(--dn-accent); border-radius: var(--dn-radius); padding: 30px; } .dn_case-comparison__after { background: #e8f5e9; border-left: 4px solid #28a745; border-radius: var(--dn-radius); padding: 30px; } .dn_case-comparison__title { color: var(--dn-dark); font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; } .dn_case-comparison__list { list-style: none; padding: 0; } .dn_case-comparison__list li { color: var(--dn-gray-700); line-height: 2; padding: 5px 0; } .dn_case-result { text-align: center; padding: 30px; } .dn_case-result__text { color: #28a745; font-size: 1.5rem; font-weight: 700; line-height: 1.5; } .dn_case-timeline { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .dn_case-timeline__item { background: var(--dn-gray-100); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius); padding: 25px; transition: var(--dn-transition); } .dn_case-timeline__item:hover { box-shadow: var(--dn-shadow-md); transform: translateX(5px); } .dn_case-timeline__title { color: var(--dn-primary); font-size: 1.125rem; font-weight: 700; margin-bottom: 15px; } .dn_case-timeline__text { color: var(--dn-gray-700); line-height: 1.6; } .dn_case-testimonial { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); border-radius: var(--dn-radius); color: var(--dn-white); padding: 40px; text-align: center; } .dn_case-testimonial__text { font-size: 1.25rem; font-style: italic; line-height: 1.8; margin-bottom: 20px; } .dn_case-testimonial__author { font-weight: 700; text-align: right; } .dn_case-tech-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .dn_case-tech-grid__item { background: var(--dn-gray-100); border-radius: var(--dn-radius); padding: 30px; } .dn_case-tech-grid__title { color: var(--dn-primary); font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; } .dn_case-tech-grid__list { list-style: none; padding: 0; } .dn_case-tech-grid__list li { color: var(--dn-gray-700); line-height: 1.8; margin-bottom: 10px; padding-left: 20px; position: relative; } .dn_case-tech-grid__list li::before { content: "•"; color: var(--dn-blue); font-weight: 700; position: absolute; left: 0; } .dn_case-section--calculator { background: var(--dn-gray-100); } .dn_case-calculator { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); border-radius: var(--dn-radius); color: var(--dn-white); padding: 40px; text-align: center; } .dn_case-calculator__title { font-size: 1.5rem; margin-bottom: 30px; } .dn_case-calculator__list { font-size: 1.125rem; line-height: 2.5; list-style: none; margin-bottom: 30px; padding: 0; } .dn_case-services { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dn_case-services__item { background: var(--dn-gray-100); border-radius: var(--dn-radius); padding: 30px; transition: var(--dn-transition); } .dn_case-services__item:hover { box-shadow: var(--dn-shadow-md); transform: translateY(-3px); } .dn_case-services__title { color: var(--dn-primary); font-size: 1.125rem; font-weight: 700; margin-bottom: 15px; } .dn_case-services__text { color: var(--dn-gray-700); line-height: 1.6; } .dn_case-faq { max-width: 900px; margin: 0 auto; } .dn_case-faq__item { background: var(--dn-gray-100); border-radius: var(--dn-radius); margin-bottom: 20px; padding: 30px; transition: var(--dn-transition); } .dn_case-faq__item:hover { box-shadow: var(--dn-shadow-md); } .dn_case-faq__question { color: var(--dn-primary); font-size: 1.125rem; font-weight: 700; margin-bottom: 15px; } .dn_case-faq__answer { color: var(--dn-gray-700); line-height: 1.8; } .dn_case-section--warning { background: var(--dn-accent); color: var(--dn-white); } .dn_case-warning { text-align: center; } .dn_case-warning__title { color: var(--dn-white); font-size: 2rem; font-weight: 700; margin-bottom: 20px; } .dn_case-warning__text { font-size: 1.25rem; margin-bottom: 30px; } .dn_case-warning__subtitle { font-size: 1.5rem; margin-bottom: 20px; } .dn_case-warning__list { font-size: 1.125rem; line-height: 2; list-style: none; margin-bottom: 30px; padding: 0; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; } .dn_case-warning__list li { padding: 10px 0; position: relative; padding-left: 30px; } .dn_case-warning__list li::before { content: "•"; position: absolute; left: 0; font-weight: 700; } .dn_case-warning__footer { font-size: 1.25rem; font-weight: 600; margin-top: 30px; } .dn_case-section__subtitle { text-align: center; color: var(--dn-gray-700); font-size: 1.25rem; margin-bottom: 40px; } .dn_case-advantage { background: #e8f5e9; border-radius: var(--dn-radius); padding: 40px; text-align: center; } .dn_case-advantage__title { color: var(--dn-dark); font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; } .dn_case-advantage__list { font-size: 1.125rem; line-height: 2.5; list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto; } .dn_case-section--cta-primary { text-align: center; padding: 60px 40px; } .dn_case-cta__note { color: var(--dn-gray-600); font-style: italic; margin-top: 20px; } .dn_case-cta { background: linear-gradient(135deg, var(--dn-dark), var(--dn-primary)); color: var(--dn-white); padding: 80px 20px; text-align: center; } .dn_case-cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 20px; } .dn_case-cta__text { font-size: 1.25rem; margin-bottom: 40px; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .dn_case-hero, .dn_case-section { animation: none; } } @media (max-width: 768px) { .dn_case-section { padding: 25px; } .dn_case-highlight { padding: 30px; } .dn_case-strategy, .dn_case-stats, .dn_case-ai-grid, .dn_case-comparison, .dn_case-timeline, .dn_case-tech-grid, .dn_case-services { grid-template-columns: 1fr; } .dn_case-table { font-size: 0.875rem; } .dn_case-table th, .dn_case-table td { padding: 10px; } .dn_case-warning__list { padding: 0 20px; } } @media (max-width: 480px) { .dn_case-hero { padding: 40px 20px; } .dn_case-section { margin-bottom: 20px; padding: 20px; } .dn_case-stats__number { font-size: 2rem; } .dn_case-section__title { font-size: 1.75rem; } } :root { --mco-primary: #194A9A; --mco-secondary: #2F62AD; --mco-blue: #348EDF; --mco-accent: #DF4756; --mco-dark: #011F4E; --mco-black: #000000; --mco-white: #ffffff; --mco-gray-50: #f8f9fa; --mco-gray-100: #e9ecef; --mco-gray-200: #dee2e6; --mco-gray-600: #6c757d; --mco-gray-700: #495057; --mco-space-xs: 4px; --mco-space-sm: 8px; --mco-space-md: 16px; --mco-space-lg: 24px; --mco-space-xl: 32px; --mco-space-2xl: 48px; --mco-space-3xl: 64px; --mco-space-4xl: 96px; --mco-radius: 14px; --mco-radius-sm: 8px; --mco-radius-lg: 20px; --mco-shadow-sm: 0 2px 4px rgba(0,0,0,0.08); --mco-shadow-md: 0 4px 8px rgba(0,0,0,0.12); --mco-shadow-lg: 0 8px 16px rgba(0,0,0,0.16); --mco-transition: 300ms ease; } .mco-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--mco-black); background: var(--mco-white); } .mco-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--mco-space-lg); } @media (prefers-reduced-motion: no-preference) { .mco-hero, .mco-content, .mco-cta, .mco-takeaways { animation: mcoFadeInUp 0.8s ease-out; } @keyframes mcoFadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } } .mco-hero { background: linear-gradient(135deg, var(--mco-dark) 0%, var(--mco-primary) 100%); padding: var(--mco-space-4xl) 0; color: var(--mco-white); } .mco-hero__intro { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; margin-bottom: var(--mco-space-lg); max-width: 900px; margin-left: auto; margin-right: auto; } .mco-hero__description { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; margin-bottom: var(--mco-space-xl); opacity: 0.95; max-width: 900px; margin-left: auto; margin-right: auto; } .mco-hero__stat { background: linear-gradient(135deg, var(--mco-blue) 0%, var(--mco-secondary) 100%); padding: var(--mco-space-lg); border-radius: var(--mco-radius); max-width: 800px; margin: 0 auto; box-shadow: var(--mco-shadow-lg); } .mco-hero__stat p { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0; text-align: center; } .mco-toc-section { background: var(--mco-gray-50); padding: var(--mco-space-xl) 0; } .mco-content { background: var(--mco-white); padding: var(--mco-space-3xl) 0; } .mco-section__title { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--mco-dark); margin: var(--mco-space-3xl) 0 var(--mco-space-xl); font-weight: 700; padding-bottom: var(--mco-space-md); border-bottom: 3px solid var(--mco-primary); } .mco-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--mco-gray-700); margin-bottom: var(--mco-space-lg); } .mco-subtitle { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--mco-primary); margin: var(--mco-space-xl) 0 var(--mco-space-lg); font-weight: 600; } .mco-label { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--mco-dark); margin: var(--mco-space-lg) 0 var(--mco-space-md); font-weight: 500; } .mco-stack { background: var(--mco-gray-50); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-grid { display: grid; gap: var(--mco-space-lg); margin: var(--mco-space-lg) 0; } .mco-grid--2col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .mco-card { background: var(--mco-white); padding: var(--mco-space-lg); border-radius: var(--mco-radius); border-left: 3px solid var(--mco-primary); box-shadow: var(--mco-shadow-sm); transition: transform var(--mco-transition), box-shadow var(--mco-transition); } .mco-card:hover { transform: translateY(-4px); box-shadow: var(--mco-shadow-md); } .mco-card--alt { border-left-color: var(--mco-blue); } .mco-card__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--mco-primary); margin-bottom: var(--mco-space-md); font-weight: 600; } .mco-list { list-style: none; padding: 0; line-height: 1.8; } .mco-list li { padding: var(--mco-space-xs) 0; color: var(--mco-gray-700); } .mco-table-wrapper { overflow-x: auto; margin: var(--mco-space-xl) 0; } .mco-table { width: 100%; border-collapse: collapse; background: var(--mco-white); box-shadow: var(--mco-shadow-md); border-radius: var(--mco-radius); overflow: hidden; } .mco-table thead { background: linear-gradient(135deg, var(--mco-dark) 0%, var(--mco-primary) 100%); } .mco-table th { padding: var(--mco-space-md); text-align: left; color: var(--mco-white); font-weight: 600; } .mco-table tbody tr { border-bottom: 1px solid var(--mco-gray-100); transition: background var(--mco-transition); } .mco-table tbody tr:hover { background: var(--mco-gray-50); } .mco-table tbody tr:nth-child(even) { background: var(--mco-gray-50); } .mco-table td { padding: var(--mco-space-md); color: var(--mco-gray-700); } .mco-priority-critical { color: var(--mco-accent); font-weight: 600; } .mco-priority-high { color: #ffc107; font-weight: 600; } .mco-priority-medium { color: #28a745; font-weight: 600; } .mco-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--mco-space-lg); margin: var(--mco-space-xl) 0; } .mco-comparison__card { padding: var(--mco-space-xl); border-radius: var(--mco-radius); transition: transform var(--mco-transition); } .mco-comparison__card:hover { transform: translateY(-4px); box-shadow: var(--mco-shadow-lg); } .mco-comparison__card--copilot { background: linear-gradient(135deg, var(--mco-primary) 0%, var(--mco-secondary) 100%); color: var(--mco-white); } .mco-comparison__card--bing { background: linear-gradient(135deg, var(--mco-blue) 0%, #00bfff 100%); color: var(--mco-white); } .mco-comparison__card h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--mco-space-lg); color: var(--mco-white); } .mco-comparison__card .mco-list li { color: var(--mco-white); opacity: 0.95; } .mco-insight { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); padding: var(--mco-space-lg); border-left: 4px solid var(--mco-accent); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; color: var(--mco-dark); } .mco-fundamentals { background: var(--mco-gray-50); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-fundamentals h4 { color: var(--mco-primary); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin: var(--mco-space-lg) 0 var(--mco-space-md); font-weight: 600; } .mco-code { background: #1e1e1e; color: #d4d4d4; padding: var(--mco-space-lg); border-radius: var(--mco-radius); overflow-x: auto; margin: var(--mco-space-lg) 0; } .mco-code pre { margin: 0; font-family: 'Courier New', Courier, monospace; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.6; } .mco-framework { background: var(--mco-white); border: 2px solid var(--mco-primary); border-radius: var(--mco-radius); padding: var(--mco-space-xl); margin: var(--mco-space-xl) 0; } .mco-framework h4 { color: var(--mco-dark); margin-bottom: var(--mco-space-lg); } .mco-ordered-list { counter-reset: item; list-style: none; padding: 0; } .mco-ordered-list > li { counter-increment: item; margin-bottom: var(--mco-space-lg); position: relative; padding-left: var(--mco-space-2xl); } .mco-ordered-list > li::before { content: counter(item); position: absolute; left: 0; top: 0; background: var(--mco-primary); color: var(--mco-white); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; } .mco-strategy-card { background: #e3f2fd; padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-strategy-card--alt { background: #f3e5f5; } .mco-enterprise { background: linear-gradient(135deg, #f0f4f8 0%, #e8eaf6 100%); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-linkedin { background: #0077b5; color: var(--mco-white); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-linkedin h3, .mco-linkedin h4 { color: var(--mco-white); } .mco-linkedin p { color: var(--mco-white); margin-bottom: var(--mco-space-md); } .mco-linkedin .mco-list li { color: var(--mco-white); opacity: 0.95; } .mco-checklist { background: var(--mco-white); border: 2px solid var(--mco-primary); border-radius: var(--mco-radius); padding: var(--mco-space-xl); margin: var(--mco-space-xl) 0; } .mco-checklist__list { list-style: none; padding: 0; line-height: 2; columns: 2; column-gap: var(--mco-space-xl); } .mco-checklist__list li { break-inside: avoid; padding: var(--mco-space-xs) 0; } .mco-edge-section, .mco-windows-section { background: var(--mco-gray-50); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-testing { background: #fff3cd; padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-tactic { background: linear-gradient(135deg, #e3f2fd 0%, #f0f4f8 100%); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; transition: transform var(--mco-transition); } .mco-tactic:hover { transform: translateX(4px); box-shadow: var(--mco-shadow-md); } .mco-tactic--alt { background: linear-gradient(135deg, #e8f5e9 0%, #fff3cd 100%); } .mco-tactic--highlight { background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%); } .mco-result { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--mco-primary); font-weight: 600; margin-top: var(--mco-space-lg); } .mco-future { background: linear-gradient(135deg, var(--mco-primary) 0%, var(--mco-blue) 100%); color: var(--mco-white); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin: var(--mco-space-xl) 0; } .mco-future h3, .mco-future h4 { color: var(--mco-white); } .mco-future p { color: var(--mco-white); opacity: 0.95; margin-bottom: var(--mco-space-lg); } .mco-roadmap { background: var(--mco-white); border: 2px solid var(--mco-primary); border-radius: var(--mco-radius); padding: var(--mco-space-xl); margin: var(--mco-space-xl) 0; } .mco-cta { background: linear-gradient(135deg, var(--mco-primary) 0%, var(--mco-secondary) 100%); color: var(--mco-white); padding: var(--mco-space-4xl) 0; text-align: center; } .mco-cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--mco-space-lg); color: var(--mco-white); } .mco-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--mco-space-xl); opacity: 0.95; max-width: 800px; margin-left: auto; margin-right: auto; } .mco-cta__box { background: rgba(255, 255, 255, 0.95); color: var(--mco-dark); padding: var(--mco-space-xl); border-radius: var(--mco-radius); max-width: 600px; margin: 0 auto; } .mco-cta__box h3 { color: var(--mco-primary); font-size: clamp(1.5rem, 2vw, 2rem); margin-bottom: var(--mco-space-lg); } .mco-cta__steps { text-align: left; padding-left: var(--mco-space-lg); line-height: 2; } .mco-cta__steps li { padding: var(--mco-space-xs) 0; } .mco-takeaways { background: var(--mco-gray-50); padding: var(--mco-space-3xl) 0; } .mco-summary { background: var(--mco-white); border-left: 4px solid var(--mco-primary); padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin-bottom: var(--mco-space-xl); box-shadow: var(--mco-shadow-sm); } .mco-summary h3 { color: var(--mco-dark); font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--mco-space-lg); } .mco-quote { background: #e3f2fd; padding: var(--mco-space-xl); border-radius: var(--mco-radius); margin-bottom: var(--mco-space-xl); } .mco-quote blockquote { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.8; color: var(--mco-primary); margin: 0 0 var(--mco-space-md) 0; font-style: italic; } .mco-quote cite { display: block; text-align: right; color: var(--mco-gray-600); font-style: normal; } .mco-resources { background: var(--mco-white); border: 2px solid var(--mco-primary); border-radius: var(--mco-radius); padding: var(--mco-space-xl); } .mco-resources h3 { color: var(--mco-dark); margin-bottom: var(--mco-space-lg); } @media (max-width: 768px) { .mco-grid--2col, .mco-comparison { grid-template-columns: 1fr; } .mco-checklist__list { columns: 1; } .mco-table { font-size: 0.875rem; } .mco-table th, .mco-table td { padding: var(--mco-space-sm); } .mco-container { padding: 0 var(--mco-space-md); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-cs-spacing-xs: 4px; --dn-cs-spacing-sm: 8px; --dn-cs-spacing-md: 16px; --dn-cs-spacing-lg: 24px; --dn-cs-spacing-xl: 32px; --dn-cs-spacing-2xl: 48px; --dn-cs-spacing-3xl: 64px; --dn-cs-spacing-4xl: 96px; --dn-cs-radius: 14px; --dn-cs-radius-sm: 8px; --dn-cs-radius-lg: 20px; --dn-cs-radius-full: 50%; --dn-cs-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-cs-transition-fast: 0.15s ease; --dn-cs-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-cs-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-cs-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); } .dn_cs-client-card { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid #e5e7eb; border-radius: var(--dn-cs-radius-lg); padding: var(--dn-cs-spacing-2xl); margin: var(--dn-cs-spacing-2xl) 0; box-shadow: var(--dn-cs-shadow-sm); transition: var(--dn-cs-transition); } .dn_cs-client-card:hover { box-shadow: var(--dn-cs-shadow-md); } .dn_cs-client-card__header { display: flex; align-items: center; gap: var(--dn-cs-spacing-lg); padding-bottom: var(--dn-cs-spacing-xl); border-bottom: 2px solid #e5e7eb; margin-bottom: var(--dn-cs-spacing-xl); } .dn_cs-client-card__logo { width: 70px; height: 70px; background: linear-gradient(135deg, #194A9A, #348EDF); border-radius: var(--dn-cs-radius); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; font-weight: 700; flex-shrink: 0; } .dn_cs-client-card__info h3 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); color: #011F4E; margin: 0 0 var(--dn-cs-spacing-xs) 0; } .dn_cs-client-card__info p { color: #6c757d; margin: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_cs-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-cs-spacing-lg); } .dn_cs-detail { display: flex; gap: var(--dn-cs-spacing-md); align-items: flex-start; } .dn_cs-detail__icon { width: 36px; height: 36px; background: #e6f2ff; border-radius: var(--dn-cs-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .dn_cs-detail__label { font-size: clamp(0.75rem, 1vw, 0.875rem); color: #6c757d; margin-bottom: var(--dn-cs-spacing-xs); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .dn_cs-detail__value { font-size: clamp(0.875rem, 1.25vw, 1rem); color: #1a1a1a; font-weight: 500; line-height: 1.4; margin: 0; } .dn_cs-challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-cs-spacing-xl); margin-top: var(--dn-cs-spacing-2xl); } .dn_cs-icon { margin-right: var(--dn-cs-spacing-sm); } .dn_cs-phase-number { display: inline-flex; width: 36px; height: 36px; background: white; color: #194A9A; border-radius: var(--dn-cs-radius-full); align-items: center; justify-content: center; font-weight: 700; margin-right: var(--dn-cs-spacing-md); } .dn_cs-timeline { position: relative; padding: var(--dn-cs-spacing-2xl) 0; } .dn_cs-timeline__item { display: flex; gap: var(--dn-cs-spacing-xl); margin-bottom: var(--dn-cs-spacing-2xl); position: relative; } .dn_cs-timeline__item:last-child { margin-bottom: 0; } .dn_cs-timeline__marker { flex-shrink: 0; width: 120px; font-weight: 700; color: #348EDF; padding-right: var(--dn-cs-spacing-lg); text-align: right; font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_cs-timeline__content { flex: 1; background: white; padding: var(--dn-cs-spacing-lg); border-radius: var(--dn-cs-radius); box-shadow: var(--dn-cs-shadow-sm); border-left: 3px solid #348EDF; transition: var(--dn-cs-transition); } .dn_cs-timeline__content:hover { transform: translateX(4px); box-shadow: var(--dn-cs-shadow-md); } .dn_cs-timeline__content h4 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: #011F4E; margin: 0 0 var(--dn-cs-spacing-md) 0; } .dn_cs-timeline__content p { color: #6c757d; line-height: 1.6; margin: 0; } .dn_cs-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-cs-spacing-xl); margin-top: var(--dn-cs-spacing-2xl); } .dn_section__content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); color: #011F4E; margin: var(--dn-cs-spacing-2xl) 0 var(--dn-cs-spacing-lg); font-weight: 700; } .dn_section__content p { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; color: #495057; margin-bottom: var(--dn-cs-spacing-lg); } .dn_section__label { display: inline-block; color: #348EDF; font-size: clamp(0.875rem, 1vw, 1rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--dn-cs-spacing-md); } .dn_section__header { text-align: center; margin-bottom: var(--dn-cs-spacing-3xl); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_cs_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_animate-fade { opacity: 0; animation: dn_cs_fadeInUp 0.6s ease forwards; } .dn_animate-fade:nth-child(1) { animation-delay: 0.1s; } .dn_animate-fade:nth-child(2) { animation-delay: 0.2s; } .dn_animate-fade:nth-child(3) { animation-delay: 0.3s; } .dn_animate-fade:nth-child(4) { animation-delay: 0.4s; } .dn_animate-fade:nth-child(5) { animation-delay: 0.5s; } @media (max-width: 768px) { .dn_cs-client-card__header { flex-direction: column; text-align: center; } .dn_cs-details-grid { grid-template-columns: 1fr; } .dn_cs-challenges-grid, .dn_cs-tech-grid { grid-template-columns: 1fr; } .dn_cs-timeline__item { flex-direction: column; gap: var(--dn-cs-spacing-md); } .dn_cs-timeline__marker { text-align: left; width: auto; padding-right: 0; } .dn_hero__actions { flex-direction: column; align-items: center; } .dn_button { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .dn_cs-client-card { padding: var(--dn-cs-spacing-lg); } .dn_cs-detail { flex-direction: column; gap: var(--dn-cs-spacing-sm); } .dn_section { padding: var(--dn-cs-spacing-2xl) 0; } .dn_container { padding: 0 var(--dn-cs-spacing-md); } } :root { --dn-pi-primary: #194A9A; --dn-pi-secondary: #2F62AD; --dn-pi-blue: #348EDF; --dn-pi-accent: #DF4756; --dn-pi-dark: #011F4E; --dn-pi-black: #000000; --dn-pi-white: #FFFFFF; --dn-pi-gray-50: #F8F9FA; --dn-pi-gray-100: #F1F5F9; --dn-pi-gray-200: #E2E8F0; --dn-pi-gray-300: #CBD5E1; --dn-pi-gray-600: #475569; --dn-pi-gray-700: #334155; --dn-pi-gray-800: #1E293B; --dn-pi-space-4: 4px; --dn-pi-space-8: 8px; --dn-pi-space-12: 12px; --dn-pi-space-16: 16px; --dn-pi-space-20: 20px; --dn-pi-space-24: 24px; --dn-pi-space-32: 32px; --dn-pi-space-40: 40px; --dn-pi-space-48: 48px; --dn-pi-space-64: 64px; --dn-pi-space-80: 80px; --dn-pi-space-96: 96px; --dn-pi-radius-sm: 8px; --dn-pi-radius-md: 12px; --dn-pi-radius-lg: 16px; --dn-pi-radius-btn: 14px; --dn-pi-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-pi-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-pi-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-pi-shadow-xl: 0 16px 48px rgba(0,0,0,0.2); --dn-pi-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-pi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn-pi-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .dn_pi-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dn-pi-black); background: var(--dn-pi-white); } .dn_pi-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-pi-space-24); } .dn_pi-hero { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-secondary) 100%); padding: var(--dn-pi-space-96) 0; position: relative; overflow: hidden; } .dn_pi-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; pointer-events: none; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .dn_pi-hero__container { position: relative; z-index: 1; text-align: center; animation: dn-pi-fadeInUp 0.8s ease-out; } .dn_pi-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--dn-pi-white); margin-bottom: var(--dn-pi-space-24); line-height: 1.2; } .dn_pi-hero__subtitle { font-size: clamp(1.125rem, 3vw, 1.375rem); color: var(--dn-pi-gray-200); max-width: 900px; margin: 0 auto; } .dn_pi-toc { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-48) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.1s both; } .dn_pi-challenge { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.2s both; } .dn_pi-challenge__box { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-48); border-radius: var(--dn-pi-radius-lg); border-left: 4px solid var(--dn-pi-primary); } .dn_pi-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--dn-pi-dark); text-align: center; margin-bottom: var(--dn-pi-space-32); font-weight: 700; } .dn_pi-challenge__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--dn-pi-space-24); color: var(--dn-pi-gray-700); } .dn_pi-challenge__highlight { background: var(--dn-pi-white); padding: var(--dn-pi-space-24); border-radius: var(--dn-pi-radius-md); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; border-left: 4px solid var(--dn-pi-accent); margin-top: var(--dn-pi-space-32); } .dn_pi-strategy { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.3s both; } .dn_pi-strategy__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-pi-space-32); } .dn_pi-strategy__item { background: var(--dn-pi-white); padding: var(--dn-pi-space-40); border-radius: var(--dn-pi-radius-lg); box-shadow: var(--dn-pi-shadow-sm); transition: all var(--dn-pi-transition); } .dn_pi-strategy__item:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-lg); } .dn_pi-strategy__title { color: var(--dn-pi-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-pi-space-16); font-weight: 700; } .dn_pi-strategy__description { color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-space-24); line-height: 1.6; } .dn_pi-strategy__list { list-style: none; padding: 0; } .dn_pi-strategy__list li { padding: var(--dn-pi-space-12) 0; padding-left: var(--dn-pi-space-24); position: relative; color: var(--dn-pi-gray-600); line-height: 1.6; } .dn_pi-strategy__list li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-pi-blue); font-weight: 700; } .dn_pi-results { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.4s both; } .dn_pi-roi { background: linear-gradient(135deg, var(--dn-pi-primary) 0%, var(--dn-pi-blue) 100%); padding: var(--dn-pi-space-48); border-radius: var(--dn-pi-radius-lg); text-align: center; margin-bottom: var(--dn-pi-space-48); } .dn_pi-roi__title { color: var(--dn-pi-white); font-size: clamp(1.75rem, 3vw, 2rem); margin-bottom: var(--dn-pi-space-16); } .dn_pi-roi__value { color: var(--dn-pi-white); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; } .dn_pi-section__subtitle { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-pi-dark); text-align: center; margin-bottom: var(--dn-pi-space-24); font-weight: 600; } .dn_pi-results__intro { text-align: center; font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-32); color: var(--dn-pi-gray-700); } .dn_pi-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-pi-space-24); margin-bottom: var(--dn-pi-space-48); } .dn_pi-platform { background: var(--dn-pi-white); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-md); text-align: center; box-shadow: var(--dn-pi-shadow-sm); border-top: 4px solid var(--dn-pi-blue); transition: all var(--dn-pi-transition); } .dn_pi-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-md); } .dn_pi-platform__name { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-12); } .dn_pi-platform__ranking { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-8); } .dn_pi-platform__keyword { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-600); } .dn_pi-insight { background: #E3F2FD; padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-md); border-left: 4px solid var(--dn-pi-blue); } .dn_pi-insight p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-pi-dark); } .dn_pi-comparison { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.5s both; } .dn_pi-table-wrapper { overflow-x: auto; margin-bottom: var(--dn-pi-space-32); } .dn_pi-table { width: 100%; min-width: 600px; border-collapse: collapse; background: var(--dn-pi-white); box-shadow: var(--dn-pi-shadow-md); border-radius: var(--dn-pi-radius-lg); overflow: hidden; } .dn_pi-table thead { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); } .dn_pi-table th { padding: var(--dn-pi-space-20); text-align: left; color: var(--dn-pi-white); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_pi-table tbody tr { border-bottom: 1px solid var(--dn-pi-gray-200); transition: background var(--dn-pi-transition); } .dn_pi-table tbody tr:hover { background: var(--dn-pi-gray-50); } .dn_pi-table tbody tr:last-child { border-bottom: none; } .dn_pi-table td { padding: var(--dn-pi-space-20); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_pi-comparison__highlight { text-align: center; font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--dn-pi-primary); } .dn_pi-numbers { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.6s both; } .dn_pi-numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-pi-space-32); margin-bottom: var(--dn-pi-space-48); } .dn_pi-numbers__card { padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); } .dn_pi-numbers__card--before { background: #FFF5F5; border: 2px solid #FFCDD2; } .dn_pi-numbers__card--after { background: #E8F5E9; border: 2px solid #A5D6A7; } .dn_pi-numbers__card h3 { color: var(--dn-pi-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-pi-space-24); } .dn_pi-numbers__list { list-style: none; padding: 0; } .dn_pi-numbers__list li { padding: var(--dn-pi-space-8) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-gray-700); } .dn_pi-numbers__total { margin-top: var(--dn-pi-space-16); padding-top: var(--dn-pi-space-16); border-top: 2px solid rgba(0,0,0,0.1); } .dn_pi-numbers__impact { text-align: center; } .dn_pi-numbers__monthly { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-pi-primary); font-weight: 700; margin-bottom: var(--dn-pi-space-16); } .dn_pi-numbers__annual { font-size: clamp(1.75rem, 3vw, 2rem); color: var(--dn-pi-dark); font-weight: 700; } .dn_pi-timeline { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.7s both; } .dn_pi-timeline__grid { display: grid; gap: var(--dn-pi-space-32); } .dn_pi-timeline__item { display: flex; gap: var(--dn-pi-space-24); align-items: flex-start; } .dn_pi-timeline__marker { background: var(--dn-pi-primary); color: var(--dn-pi-white); padding: var(--dn-pi-space-12) var(--dn-pi-space-20); border-radius: 30px; font-weight: 600; white-space: nowrap; font-size: clamp(0.875rem, 1vw, 1rem); } .dn_pi-timeline__content { flex: 1; } .dn_pi-timeline__content h4 { color: var(--dn-pi-dark); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-pi-space-12); } .dn_pi-timeline__content p { color: var(--dn-pi-gray-700); line-height: 1.6; } .dn_pi-testimonial { background: linear-gradient(135deg, var(--dn-pi-primary) 0%, var(--dn-pi-secondary) 100%); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.8s both; } .dn_pi-testimonial__quote { max-width: 900px; margin: 0 auto; text-align: center; } .dn_pi-testimonial__quote p { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.8; color: var(--dn-pi-white); font-style: italic; margin-bottom: var(--dn-pi-space-24); } .dn_pi-testimonial__author { display: block; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-gray-200); font-weight: 600; font-style: normal; } .dn_pi-technical { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 0.9s both; } .dn_pi-technical__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-space-32); } .dn_pi-card { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); transition: all var(--dn-pi-transition); } .dn_pi-card:hover { transform: translateY(-4px); box-shadow: var(--dn-pi-shadow-md); } .dn_pi-card__title { color: var(--dn-pi-primary); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-pi-space-20); font-weight: 700; } .dn_pi-card__list { list-style: none; padding: 0; } .dn_pi-card__list li { padding: var(--dn-pi-space-8) 0; color: var(--dn-pi-gray-700); line-height: 1.6; } .dn_pi-card__description { color: var(--dn-pi-gray-700); line-height: 1.6; } .dn_pi-calculator { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1s both; } .dn_pi-calculator__box { background: linear-gradient(135deg, var(--dn-pi-accent) 0%, #FF6B7A 100%); padding: var(--dn-pi-space-48); border-radius: var(--dn-pi-radius-lg); text-align: center; color: var(--dn-pi-white); } .dn_pi-calculator__box h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-pi-space-16); } .dn_pi-calculator__box > p { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-32); } .dn_pi-calculator__content { background: rgba(255,255,255,0.95); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-md); color: var(--dn-pi-dark); } .dn_pi-calculator__label { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-16); } .dn_pi-calculator__content p { margin: var(--dn-pi-space-8) 0; } .dn_pi-calculator__result { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: var(--dn-pi-space-20); color: var(--dn-pi-accent); font-weight: 700; } .dn_pi-services { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.1s both; } .dn_pi-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-pi-space-32); } .dn_pi-competition { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.2s both; } .dn_pi-faq { background: var(--dn-pi-white); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.3s both; } .dn_pi-faq__list { max-width: 900px; margin: 0 auto; } .dn_pi-faq__item { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); margin-bottom: var(--dn-pi-space-24); transition: all var(--dn-pi-transition); } .dn_pi-faq__item:hover { box-shadow: var(--dn-pi-shadow-md); } .dn_pi-faq__question { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-space-16); font-weight: 700; } .dn_pi-faq__answer { color: var(--dn-pi-gray-700); line-height: 1.7; } .dn_pi-warning { background: var(--dn-pi-gray-50); padding: var(--dn-pi-space-80) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.4s both; } .dn_pi-warning__box { background: linear-gradient(135deg, #FFF5F5 0%, #FFE0E2 100%); padding: var(--dn-pi-space-48); border-radius: var(--dn-pi-radius-lg); border: 2px solid var(--dn-pi-accent); text-align: center; } .dn_pi-warning__box h3 { color: var(--dn-pi-accent); font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-pi-space-16); } .dn_pi-warning__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-space-32); } .dn_pi-warning__content { background: var(--dn-pi-white); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-md); } .dn_pi-warning__label { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-pi-space-16); color: var(--dn-pi-dark); } .dn_pi-warning__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto var(--dn-pi-space-24); } .dn_pi-warning__list li { padding: var(--dn-pi-space-8) 0; color: var(--dn-pi-gray-700); } .dn_pi-warning__cta { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-pi-accent); margin-top: var(--dn-pi-space-24); } .dn_pi-cta { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); padding: var(--dn-pi-space-96) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.5s both; } .dn_pi-cta__content { text-align: center; max-width: 900px; margin: 0 auto; } .dn_pi-cta__title { font-size: clamp(2rem, 4vw, 2.5rem); color: var(--dn-pi-white); margin-bottom: var(--dn-pi-space-20); font-weight: 700; } .dn_pi-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-pi-gray-200); margin-bottom: var(--dn-pi-space-40); } .dn_pi-cta__offer { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-pi-space-32); border-radius: var(--dn-pi-radius-lg); margin-bottom: var(--dn-pi-space-40); } .dn_pi-cta__label { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-pi-white); margin-bottom: var(--dn-pi-space-20); } .dn_pi-cta__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto; } .dn_pi-cta__list li { padding: var(--dn-pi-space-8) 0; color: var(--dn-pi-white); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_pi-btn { display: inline-block; padding: var(--dn-pi-space-16) var(--dn-pi-space-40); border-radius: var(--dn-pi-radius-btn); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: all var(--dn-pi-transition); text-align: center; border: 2px solid transparent; margin-top: var(--dn-pi-space-20); } .dn_pi-btn--accent { background: var(--dn-pi-accent); color: var(--dn-pi-white); } .dn_pi-btn--accent:hover { background: #C73D4A; transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-lg); } .dn_pi-btn--accent:focus-visible { outline: 3px solid var(--dn-pi-accent); outline-offset: 2px; } .dn_pi-cta__note { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-pi-gray-200); margin-top: var(--dn-pi-space-20); } .dn_pi-locations { background: var(--dn-pi-white); padding: var(--dn-pi-space-64) 0; animation: dn-pi-fadeInUp 0.8s ease-out 1.6s both; } .dn_pi-locations__content { text-align: center; } .dn_pi-locations__title { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-space-32); font-weight: 700; } .dn_pi-locations__info { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-gray-700); line-height: 1.8; } .dn_pi-locations__info a { color: var(--dn-pi-primary); text-decoration: none; transition: all var(--dn-pi-transition); } .dn_pi-locations__info a:hover { color: var(--dn-pi-blue); text-decoration: underline; } .dn_pi-locations__info a:focus-visible { outline: 2px solid var(--dn-pi-blue); outline-offset: 2px; border-radius: var(--dn-pi-radius-sm); } @media (max-width: 768px) { .dn_pi-strategy__grid, .dn_pi-platforms, .dn_pi-numbers__grid, .dn_pi-technical__grid, .dn_pi-services__grid { grid-template-columns: 1fr; } .dn_pi-timeline__item { flex-direction: column; } .dn_pi-timeline__marker { margin-bottom: var(--dn-pi-space-16); } .dn_pi-table { font-size: 0.875rem; } .dn_pi-table th, .dn_pi-table td { padding: var(--dn-pi-space-12); } .dn_pi-challenge__box, .dn_pi-calculator__box, .dn_pi-warning__box { padding: var(--dn-pi-space-24); } } @media (max-width: 480px) { .dn_pi-container { padding: 0 var(--dn-pi-space-16); } .dn_pi-hero, .dn_pi-cta { padding: var(--dn-pi-space-64) 0; } .dn_pi-challenge, .dn_pi-strategy, .dn_pi-results, .dn_pi-comparison, .dn_pi-numbers, .dn_pi-timeline, .dn_pi-technical, .dn_pi-calculator, .dn_pi-services, .dn_pi-competition, .dn_pi-faq, .dn_pi-warning { padding: var(--dn-pi-space-48) 0; } } :root { --dn-cs-primary: #194A9A; --dn-cs-secondary: #2F62AD; --dn-cs-blue: #348EDF; --dn-cs-accent: #DF4756; --dn-cs-dark: #011F4E; --dn-cs-black: #000000; --dn-cs-white: #ffffff; --dn-cs-gray-50: #f9fafb; --dn-cs-gray-100: #f3f4f6; --dn-cs-gray-200: #e5e7eb; --dn-cs-gray-600: #4b5563; --dn-cs-gray-700: #374151; --dn-cs-spacing-xs: 4px; --dn-cs-spacing-sm: 8px; --dn-cs-spacing-md: 16px; --dn-cs-spacing-lg: 24px; --dn-cs-spacing-xl: 32px; --dn-cs-spacing-2xl: 48px; --dn-cs-spacing-3xl: 64px; --dn-cs-spacing-4xl: 96px; --dn-cs-radius: 14px; --dn-cs-radius-sm: 8px; --dn-cs-radius-lg: 20px; --dn-cs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --dn-cs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --dn-cs-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); --dn-cs-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dn_header { background: var(--dn-cs-white); border-bottom: 1px solid var(--dn-cs-gray-200); position: sticky; top: 0; z-index: 100; box-shadow: var(--dn-cs-shadow-sm); } .dn_header__content { display: flex; align-items: center; justify-content: space-between; padding: var(--dn-cs-spacing-lg) 0; } .dn_header__logo { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; color: var(--dn-cs-primary); } .dn_header__nav { display: flex; gap: var(--dn-cs-spacing-xl); } .dn_header__link { color: var(--dn-cs-gray-700); text-decoration: none; font-weight: 500; transition: var(--dn-cs-transition); position: relative; } .dn_header__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--dn-cs-blue); transition: var(--dn-cs-transition); } .dn_header__link:hover, .dn_header__link:focus-visible { color: var(--dn-cs-primary); } .dn_header__link:hover::after { width: 100%; } .dn_header__link:focus-visible { outline: 2px solid var(--dn-cs-blue); outline-offset: 4px; border-radius: var(--dn-cs-radius-sm); } .dn_main { background: var(--dn-cs-gray-50); padding: var(--dn-cs-spacing-3xl) 0; } .dn_section--highlight { background: linear-gradient(135deg, var(--dn-cs-primary) 0%, var(--dn-cs-secondary) 100%); border-radius: var(--dn-cs-radius-lg); padding: var(--dn-cs-spacing-3xl); margin: var(--dn-cs-spacing-2xl) 0; color: var(--dn-cs-white); } .dn_client-card { background: var(--dn-cs-white); border-radius: var(--dn-cs-radius); padding: var(--dn-cs-spacing-2xl); box-shadow: var(--dn-cs-shadow-md); margin-bottom: var(--dn-cs-spacing-xl); } .dn_client-card__title { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--dn-cs-primary); margin-bottom: var(--dn-cs-spacing-xl); } .dn_client-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-cs-spacing-lg); } .dn_client-card__item { padding: var(--dn-cs-spacing-md); background: var(--dn-cs-gray-50); border-radius: var(--dn-cs-radius-sm); } .dn_client-card__label { font-size: 0.875rem; color: var(--dn-cs-gray-600); margin-bottom: var(--dn-cs-spacing-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .dn_client-card__value { color: var(--dn-cs-gray-700); line-height: 1.5; } .dn_challenges { display: grid; gap: var(--dn-cs-spacing-lg); } .dn_challenge-card { background: var(--dn-cs-white); border-left: 4px solid var(--dn-cs-accent); border-radius: var(--dn-cs-radius); padding: var(--dn-cs-spacing-xl); transition: var(--dn-cs-transition); } .dn_challenge-card:hover { box-shadow: var(--dn-cs-shadow-lg); transform: translateX(4px); } .dn_challenge-card__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-cs-accent); margin-bottom: var(--dn-cs-spacing-md); font-weight: 700; } .dn_challenge-card__text { color: var(--dn-cs-gray-700); line-height: 1.7; } .dn_results-content { max-width: 900px; margin: var(--dn-cs-spacing-3xl) auto 0; } .dn_results-content__title { font-size: clamp(1.5rem, 2vw, 1.875rem); color: var(--dn-cs-white); margin: var(--dn-cs-spacing-2xl) 0 var(--dn-cs-spacing-lg); } .dn_results-content__text { color: rgba(255, 255, 255, 0.95); line-height: 1.8; margin-bottom: var(--dn-cs-spacing-lg); } .dn_rankings-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--dn-cs-radius); padding: var(--dn-cs-spacing-xl); margin: var(--dn-cs-spacing-xl) 0; } .dn_rankings-card__title { color: var(--dn-cs-white); font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--dn-cs-spacing-lg); text-align: center; } .dn_rankings-card__list { display: flex; flex-direction: column; gap: var(--dn-cs-spacing-md); } .dn_rankings-card__item { display: flex; justify-content: space-between; align-items: center; padding: var(--dn-cs-spacing-md); background: rgba(255, 255, 255, 0.1); border-radius: var(--dn-cs-radius-sm); } .dn_rankings-card__keyword { color: var(--dn-cs-white); font-weight: 500; } .dn_rankings-card__position { background: var(--dn-cs-accent); color: var(--dn-cs-white); padding: var(--dn-cs-spacing-xs) var(--dn-cs-spacing-md); border-radius: 20px; font-weight: 700; font-size: 0.875rem; } .dn_services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-cs-spacing-xl); } .dn_service-card { background: var(--dn-cs-white); border-radius: var(--dn-cs-radius); padding: var(--dn-cs-spacing-xl); box-shadow: var(--dn-cs-shadow-md); transition: var(--dn-cs-transition); } .dn_service-card:hover { transform: translateY(-5px); box-shadow: var(--dn-cs-shadow-lg); } .dn_service-card__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-cs-primary); margin-bottom: var(--dn-cs-spacing-lg); padding-bottom: var(--dn-cs-spacing-md); border-bottom: 2px solid var(--dn-cs-gray-200); } .dn_service-card__list { list-style: none; padding: 0; } .dn_service-card__list li { position: relative; padding-left: var(--dn-cs-spacing-lg); margin-bottom: var(--dn-cs-spacing-md); line-height: 1.6; color: var(--dn-cs-gray-700); } .dn_service-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-cs-blue); font-weight: 700; } .dn_takeaway-grid { display: grid; gap: var(--dn-cs-spacing-xl); } .dn_takeaway-card { background: var(--dn-cs-white); border-radius: var(--dn-cs-radius); padding: var(--dn-cs-spacing-xl); box-shadow: var(--dn-cs-shadow-md); border-top: 3px solid var(--dn-cs-blue); } .dn_takeaway-card__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-cs-primary); margin-bottom: var(--dn-cs-spacing-md); } .dn_takeaway-card__text { color: var(--dn-cs-gray-700); line-height: 1.7; } .dn_roadmap { display: grid; gap: var(--dn-cs-spacing-lg); margin-top: var(--dn-cs-spacing-xl); } .dn_roadmap__item { display: flex; gap: var(--dn-cs-spacing-lg); align-items: center; padding: var(--dn-cs-spacing-lg); background: var(--dn-cs-white); border-radius: var(--dn-cs-radius); box-shadow: var(--dn-cs-shadow-sm); transition: var(--dn-cs-transition); } .dn_roadmap__item:hover { transform: translateX(8px); box-shadow: var(--dn-cs-shadow-md); } .dn_roadmap__icon { font-size: 2rem; flex-shrink: 0; } .dn_roadmap__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-cs-gray-700); margin: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .dn_header__nav { display: none; } .dn_client-card__grid { grid-template-columns: 1fr; } .dn_rankings-card__item { flex-direction: column; text-align: center; gap: var(--dn-cs-spacing-sm); } .dn_services-grid { grid-template-columns: 1fr; } .dn_roadmap__item { flex-direction: column; text-align: center; } .dn_section--highlight { padding: var(--dn-cs-spacing-2xl) var(--dn-cs-spacing-lg); } } @media (max-width: 480px) { .dn_main { padding: var(--dn-cs-spacing-2xl) 0; } } .dn_timeline2 { FONT-WEIGHT: 200; display: grid ; grid-template-columns: repeat(2, 1fr); gap: var(--dn-spacing-xl); } .dn_service-card2:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } @media (min-width: 900px) { .dn_service-card2 { align-items: center; } } :root { --dn-pi-primary: #194A9A; --dn-pi-secondary: #2F62AD; --dn-pi-blue: #348EDF; --dn-pi-accent: #DF4756; --dn-pi-dark: #011F4E; --dn-pi-black: #000000; --dn-pi-white: #FFFFFF; --dn-pi-gray-50: #F8F9FA; --dn-pi-gray-100: #E9ECEF; --dn-pi-gray-200: #DEE2E6; --dn-pi-gray-600: #6B7280; --dn-pi-gray-700: #495057; --dn-pi-spacing-xs: 4px; --dn-pi-spacing-sm: 8px; --dn-pi-spacing-md: 16px; --dn-pi-spacing-lg: 24px; --dn-pi-spacing-xl: 32px; --dn-pi-spacing-2xl: 48px; --dn-pi-spacing-3xl: 64px; --dn-pi-spacing-4xl: 96px; --dn-pi-radius: 14px; --dn-pi-radius-sm: 8px; --dn-pi-radius-lg: 20px; --dn-pi-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-pi-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-pi-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-pi-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dn-pi-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dn-pi-black); } .dn-pi-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-pi-spacing-lg); } @keyframes dn-pi-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn-pi-hero-section { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); padding: var(--dn-pi-spacing-4xl) 0; position: relative; overflow: hidden; } .dn-pi-hero-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .dn-pi-hero-content { position: relative; z-index: 1; text-align: center; animation: dn-pi-fadeInUp 0.8s ease-out; } .dn-pi-badge { display: inline-block; padding: var(--dn-pi-spacing-xs) var(--dn-pi-spacing-md); background: var(--dn-pi-blue); color: var(--dn-pi-white); border-radius: 50px; font-size: clamp(0.75rem, 1.5vw, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--dn-pi-transition); } .dn-pi-badge--hero { background: var(--dn-pi-accent); margin-bottom: var(--dn-pi-spacing-lg); } .dn-pi-badge:hover { transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-sm); } .dn-pi-hero__heading { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-pi-white); margin: 0 0 var(--dn-pi-spacing-lg); line-height: 1.2; } .dn-pi-hero__lead { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-pi-gray-100); max-width: 900px; margin: 0 auto var(--dn-pi-spacing-3xl); opacity: 0.95; } .dn-pi-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-pi-spacing-lg); margin-top: var(--dn-pi-spacing-2xl); } .dn-pi-stat-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); text-align: center; transition: var(--dn-pi-transition); } .dn-pi-stat-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-5px); } .dn-pi-stat-card__value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--dn-pi-white); margin-bottom: var(--dn-pi-spacing-sm); } .dn-pi-stat-card__label { font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--dn-pi-gray-100); opacity: 0.9; } .dn-pi-client-section { background: var(--dn-pi-gray-50); padding: var(--dn-pi-spacing-3xl) 0; } .dn-pi-client-card { background: var(--dn-pi-white); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-2xl); box-shadow: var(--dn-pi-shadow-md); animation: dn-pi-fadeInUp 0.8s ease-out; animation-delay: 0.2s; animation-fill-mode: both; } .dn-pi-client-card__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-lg); } .dn-pi-client-card__meta { margin-bottom: var(--dn-pi-spacing-lg); } .dn-pi-client-card__info { line-height: 1.8; color: var(--dn-pi-gray-700); } .dn-pi-client-card__badges { display: flex; flex-wrap: wrap; gap: var(--dn-pi-spacing-sm); } .dn-pi-content-section { padding: var(--dn-pi-spacing-4xl) 0; background: var(--dn-pi-white); } .dn-pi-content-section--accent { background: linear-gradient(135deg, var(--dn-pi-primary) 0%, var(--dn-pi-secondary) 100%); } .dn-pi-section-header { text-align: center; margin-bottom: var(--dn-pi-spacing-3xl); animation: dn-pi-fadeInUp 0.8s ease-out; } .dn-pi-section-header__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-md); } .dn-pi-section-header__title--white { color: var(--dn-pi-white); } .dn-pi-section-header__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-pi-gray-600); } .dn-pi-section-header__subtitle--white { color: var(--dn-pi-gray-100); } .dn-pi-grid { display: grid; gap: var(--dn-pi-spacing-lg); } .dn-pi-grid--3col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dn-pi-grid--2col { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .dn-pi-feature-card { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); border: 1px solid var(--dn-pi-gray-200); transition: var(--dn-pi-transition); } .dn-pi-feature-card--animated { animation: dn-pi-fadeInUp 0.8s ease-out; animation-fill-mode: both; } .dn-pi-feature-card--animated:nth-child(1) { animation-delay: 0.1s; } .dn-pi-feature-card--animated:nth-child(2) { animation-delay: 0.2s; } .dn-pi-feature-card--animated:nth-child(3) { animation-delay: 0.3s; } .dn-pi-feature-card--animated:nth-child(4) { animation-delay: 0.4s; } .dn-pi-feature-card--animated:nth-child(5) { animation-delay: 0.5s; } .dn-pi-feature-card--animated:nth-child(6) { animation-delay: 0.6s; } .dn-pi-feature-card:hover { transform: translateY(-5px); box-shadow: var(--dn-pi-shadow-lg); border-color: var(--dn-pi-blue); } .dn-pi-feature-card:focus-within { outline: 3px solid var(--dn-pi-blue); outline-offset: 2px; } .dn-pi-feature-card__icon { font-size: 2.5rem; margin-bottom: var(--dn-pi-spacing-lg); display: block; } .dn-pi-feature-card__title { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn-pi-feature-card__text { color: var(--dn-pi-gray-700); line-height: 1.8; } .dn-pi-solution-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-2xl); margin-bottom: var(--dn-pi-spacing-xl); } .dn-pi-solution-card__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dn-pi-white); margin-bottom: var(--dn-pi-spacing-lg); } .dn-pi-solution-card__description { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-gray-100); margin-bottom: var(--dn-pi-spacing-2xl); line-height: 1.8; } .dn-pi-service-card { background: rgba(255,255,255,0.95); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); transition: var(--dn-pi-transition); } .dn-pi-service-card:hover { transform: translateY(-3px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-service-card__title { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); font-weight: 600; } .dn-pi-service-card__icon { margin-right: var(--dn-pi-spacing-sm); } .dn-pi-service-card__list { list-style: none; padding: 0; } .dn-pi-service-card__list li { padding: var(--dn-pi-spacing-xs) 0; color: var(--dn-pi-gray-700); position: relative; padding-left: var(--dn-pi-spacing-lg); } .dn-pi-service-card__list li::before { content: '•'; position: absolute; left: 0; color: var(--dn-pi-blue); font-weight: bold; } .dn-pi-timeline { display: grid; gap: var(--dn-pi-spacing-xl); } .dn-pi-timeline__item { display: flex; gap: var(--dn-pi-spacing-lg); position: relative; } .dn-pi-timeline__item--animated { animation: dn-pi-fadeInUp 0.8s ease-out; animation-fill-mode: both; } .dn-pi-timeline__item--animated:nth-child(1) { animation-delay: 0.2s; } .dn-pi-timeline__item--animated:nth-child(2) { animation-delay: 0.3s; } .dn-pi-timeline__item--animated:nth-child(3) { animation-delay: 0.4s; } .dn-pi-timeline__item--animated:nth-child(4) { animation-delay: 0.5s; } .dn-pi-timeline__item::after { content: ''; position: absolute; left: 24px; top: 60px; bottom: -40px; width: 2px; background: var(--dn-pi-gray-200); } .dn-pi-timeline__item:last-child::after { display: none; } .dn-pi-timeline__marker { flex-shrink: 0; width: 48px; height: 48px; background: var(--dn-pi-blue); color: var(--dn-pi-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; position: relative; z-index: 1; } .dn-pi-timeline__content { flex: 1; background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); } .dn-pi-timeline__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-sm); font-weight: 600; } .dn-pi-timeline__date { font-size: 0.875rem; color: var(--dn-pi-accent); font-weight: 600; margin-bottom: var(--dn-pi-spacing-md); } .dn-pi-timeline__description { color: var(--dn-pi-gray-700); line-height: 1.8; } .dn-pi-results-section { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); padding: var(--dn-pi-spacing-4xl) 0; } .dn-pi-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-pi-spacing-lg); } .dn-pi-result-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); text-align: center; transition: var(--dn-pi-transition); animation: dn-pi-fadeInUp 0.8s ease-out; animation-fill-mode: both; } .dn-pi-result-card:nth-child(1) { animation-delay: 0.1s; } .dn-pi-result-card:nth-child(2) { animation-delay: 0.15s; } .dn-pi-result-card:nth-child(3) { animation-delay: 0.2s; } .dn-pi-result-card:nth-child(4) { animation-delay: 0.25s; } .dn-pi-result-card:nth-child(5) { animation-delay: 0.3s; } .dn-pi-result-card:nth-child(6) { animation-delay: 0.35s; } .dn-pi-result-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-5px); } .dn-pi-result-card__value { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-pi-white); margin: 0 0 var(--dn-pi-spacing-sm); } .dn-pi-result-card__metric { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-pi-white); margin: 0 0 var(--dn-pi-spacing-sm); font-weight: 600; } .dn-pi-result-card__description { font-size: clamp(0.875rem, 1.25vw, 1rem); color: var(--dn-pi-gray-100); margin: 0; opacity: 0.9; } .dn-pi-testimonial { background: linear-gradient(135deg, var(--dn-pi-gray-50) 0%, var(--dn-pi-white) 100%); border-left: 4px solid var(--dn-pi-blue); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-2xl); box-shadow: var(--dn-pi-shadow-md); animation: dn-pi-fadeInUp 0.8s ease-out; } .dn-pi-testimonial__quote { font-size: clamp(1.125rem, 2vw, 1.375rem); font-style: italic; color: var(--dn-pi-gray-700); line-height: 1.8; margin: 0 0 var(--dn-pi-spacing-lg); } .dn-pi-testimonial__author { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--dn-pi-dark); font-style: normal; margin-bottom: var(--dn-pi-spacing-xs); display: block; } .dn-pi-testimonial__position { color: var(--dn-pi-gray-600); margin: 0 0 var(--dn-pi-spacing-md); } .dn-pi-testimonial__logo { font-weight: 700; color: var(--dn-pi-primary); letter-spacing: 2px; margin: 0; } .dn-pi-achievements { display: grid; gap: var(--dn-pi-spacing-lg); } .dn-pi-achievement { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); border-left: 4px solid var(--dn-pi-blue); transition: var(--dn-pi-transition); animation: dn-pi-fadeInUp 0.8s ease-out; animation-fill-mode: both; } .dn-pi-achievement:nth-child(1) { animation-delay: 0.1s; } .dn-pi-achievement:nth-child(2) { animation-delay: 0.15s; } .dn-pi-achievement:nth-child(3) { animation-delay: 0.2s; } .dn-pi-achievement:nth-child(4) { animation-delay: 0.25s; } .dn-pi-achievement:nth-child(5) { animation-delay: 0.3s; } .dn-pi-achievement--success { border-color: #28a745; } .dn-pi-achievement--info { border-color: var(--dn-pi-blue); } .dn-pi-achievement--purple { border-color: #6f42c1; } .dn-pi-achievement--orange { border-color: #fd7e14; } .dn-pi-achievement--teal { border-color: #20c997; } .dn-pi-achievement:hover { transform: translateX(5px); box-shadow: var(--dn-pi-shadow-md); } .dn-pi-achievement__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); font-weight: 600; } .dn-pi-achievement__text { color: var(--dn-pi-gray-700); line-height: 1.8; margin: 0; } .dn-pi-cta-section { background: linear-gradient(135deg, var(--dn-pi-accent) 0%, #C73D4A 100%); padding: var(--dn-pi-spacing-4xl) 0; } .dn-pi-cta-content { text-align: center; max-width: 800px; margin: 0 auto; } .dn-pi-cta__heading { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--dn-pi-white); margin-bottom: var(--dn-pi-spacing-lg); font-weight: 700; } .dn-pi-cta__text { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-pi-gray-100); margin-bottom: var(--dn-pi-spacing-2xl); line-height: 1.8; } .dn-pi-cta__actions { display: flex; gap: var(--dn-pi-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn-pi-btn { display: inline-block; padding: var(--dn-pi-spacing-md) var(--dn-pi-spacing-xl); border-radius: var(--dn-pi-radius); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); text-decoration: none; transition: var(--dn-pi-transition); cursor: pointer; } .dn-pi-btn--primary { background: var(--dn-pi-white); color: var(--dn-pi-accent); } .dn-pi-btn--primary:hover { background: var(--dn-pi-gray-100); transform: translateY(-2px); box-shadow: var(--dn-pi-shadow-lg); } .dn-pi-btn--primary:active { transform: translateY(0); } .dn-pi-btn--primary:focus-visible { outline: 3px solid var(--dn-pi-white); outline-offset: 2px; } .dn-pi-btn--secondary { background: transparent; color: var(--dn-pi-white); border: 2px solid var(--dn-pi-white); } .dn-pi-btn--secondary:hover { background: var(--dn-pi-white); color: var(--dn-pi-accent); transform: translateY(-2px); } .dn-pi-btn--secondary:active { transform: translateY(0); } .dn-pi-btn--secondary:focus-visible { outline: 3px solid var(--dn-pi-white); outline-offset: 2px; } .dn-pi-service-item { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); border: 1px solid var(--dn-pi-gray-200); transition: var(--dn-pi-transition); } .dn-pi-service-item:hover { transform: translateY(-3px); box-shadow: var(--dn-pi-shadow-md); border-color: var(--dn-pi-blue); } .dn-pi-service-item__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-sm); font-weight: 600; } .dn-pi-service-item__text { color: var(--dn-pi-gray-700); margin: 0; line-height: 1.7; } .dn-pi-footer { background: var(--dn-pi-dark); color: var(--dn-pi-white); padding: var(--dn-pi-spacing-3xl) 0; } .dn-pi-footer__text { margin-bottom: var(--dn-pi-spacing-lg); line-height: 1.8; } .dn-pi-footer__copyright { color: var(--dn-pi-gray-100); margin: 0; opacity: 0.8; } @media (max-width: 768px) { .dn-pi-container { padding: 0 var(--dn-pi-spacing-md); } .dn-pi-hero-section, .dn-pi-content-section, .dn-pi-results-section, .dn-pi-cta-section { padding: var(--dn-pi-spacing-3xl) 0; } .dn-pi-stats-row, .dn-pi-results-grid { grid-template-columns: 1fr 1fr; } .dn-pi-timeline__item { flex-direction: column; } .dn-pi-timeline__item::after { display: none; } .dn-pi-timeline__marker { margin: 0 auto var(--dn-pi-spacing-md); } .dn-pi-cta__actions { flex-direction: column; align-items: center; } .dn-pi-btn { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .dn-pi-stats-row, .dn-pi-results-grid { grid-template-columns: 1fr; } .dn-pi-grid--3col, .dn-pi-grid--2col { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --ic-primary: #194A9A; --ic-secondary: #2F62AD; --ic-blue: #348EDF; --ic-accent: #DF4756; --ic-dark: #011F4E; --ic-black: #000000; --ic-white: #ffffff; --ic-gray-light: #f8f9fa; --ic-gray-medium: #e5e7eb; --ic-gray-dark: #6b7280; --ic-spacing-xs: 4px; --ic-spacing-sm: 8px; --ic-spacing-md: 16px; --ic-spacing-lg: 24px; --ic-spacing-xl: 32px; --ic-spacing-2xl: 48px; --ic-spacing-3xl: 64px; --ic-spacing-4xl: 96px; --ic-radius: 14px; --ic-radius-sm: 8px; --ic-radius-lg: 20px; --ic-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --ic-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --ic-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --ic-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes ic-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .ic_wrapper { min-height: 100vh; background: var(--ic-white); } .ic_header { background: linear-gradient(135deg, var(--ic-dark) 0%, var(--ic-primary) 100%); padding: var(--ic-spacing-lg) 0; box-shadow: var(--ic-shadow-md); } .ic_header__content { display: flex; justify-content: space-between; align-items: center; } .ic_header__logo { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--ic-white); } .ic_header__nav { display: flex; gap: var(--ic-spacing-xl); } .ic_header__nav a { color: var(--ic-white); text-decoration: none; transition: var(--ic-transition); position: relative; } .ic_header__nav a:hover { opacity: 0.8; } .ic_header__nav a:focus-visible { outline: 2px solid var(--ic-blue); outline-offset: 2px; border-radius: var(--ic-radius-sm); } .ic_hero { background: linear-gradient(135deg, var(--ic-dark) 0%, var(--ic-primary) 100%); color: var(--ic-white); padding: var(--ic-spacing-4xl) 0; text-align: center; animation: ic-fadeInUp 0.8s ease-out; } .ic_hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: var(--ic-spacing-lg); animation: ic-fadeInUp 0.8s ease-out 0.1s both; } .ic_hero__subtitle { font-size: clamp(1.25rem, 3vw, 1.5rem); opacity: 0.9; margin-bottom: var(--ic-spacing-3xl); animation: ic-fadeInUp 0.8s ease-out 0.2s both; } .ic_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ic-spacing-xl); max-width: 800px; margin: 0 auto; animation: ic-fadeInUp 0.8s ease-out 0.3s both; } .ic_stats__item { text-align: center; } .ic_stats__number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--ic-blue); text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .ic_stats__label { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; margin-top: var(--ic-spacing-sm); } .ic_main { background: var(--ic-gray-light); padding: var(--ic-spacing-3xl) 0; } .ic_section { margin-bottom: var(--ic-spacing-3xl); animation: ic-fadeInUp 0.8s ease-out; } .ic_section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--ic-dark); margin-bottom: var(--ic-spacing-2xl); border-left: 4px solid var(--ic-blue); padding-left: var(--ic-spacing-lg); } .ic_text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--ic-gray-dark); margin-bottom: var(--ic-spacing-md); } .ic_client-card { background: linear-gradient(135deg, var(--ic-primary) 0%, var(--ic-secondary) 100%); color: var(--ic-white); padding: var(--ic-spacing-2xl); border-radius: var(--ic-radius); margin-bottom: var(--ic-spacing-xl); } .ic_client-card__title { font-size: clamp(1.5rem, 2.5vw, 1.75rem); margin-bottom: var(--ic-spacing-xl); } .ic_client-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ic-spacing-lg); } .ic_client-card__item { background: rgba(255, 255, 255, 0.1); padding: var(--ic-spacing-md); border-radius: var(--ic-radius-sm); } .ic_client-card__label { font-weight: 600; margin-bottom: var(--ic-spacing-xs); } .ic_client-card__value { opacity: 0.9; } .ic_challenges { display: grid; gap: var(--ic-spacing-xl); } .ic_challenge { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); transition: var(--ic-transition); } .ic_challenge:hover { box-shadow: var(--ic-shadow-lg); transform: translateY(-4px); } .ic_challenge__title { color: var(--ic-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ic-spacing-md); } .ic_challenge__text { color: var(--ic-gray-dark); line-height: 1.7; } .ic_approach { display: grid; gap: var(--ic-spacing-xl); } .ic_approach__phase { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); } .ic_approach__title { color: var(--ic-blue); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ic-spacing-md); } .ic_approach__text { color: var(--ic-gray-dark); margin-bottom: var(--ic-spacing-lg); line-height: 1.7; } .ic_approach__list { list-style: none; padding: 0; } .ic_approach__list li { padding: var(--ic-spacing-sm) 0; padding-left: var(--ic-spacing-xl); position: relative; color: var(--ic-gray-dark); } .ic_approach__list li::before { content: "✓"; position: absolute; left: 0; color: var(--ic-blue); font-weight: 700; } .ic_results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ic-spacing-xl); margin-bottom: var(--ic-spacing-2xl); } .ic_result-card { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); text-align: center; box-shadow: var(--ic-shadow-sm); transition: var(--ic-transition); } .ic_result-card:hover { transform: translateY(-8px); box-shadow: var(--ic-shadow-lg); } .ic_result-card__icon { font-size: 3rem; margin-bottom: var(--ic-spacing-md); } .ic_result-card__metric { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--ic-blue); margin-bottom: var(--ic-spacing-sm); } .ic_result-card__label { color: var(--ic-gray-dark); font-size: clamp(0.875rem, 1.5vw, 1rem); } .ic_achievements { display: grid; gap: var(--ic-spacing-xl); } .ic_achievement { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); } .ic_achievement__title { color: var(--ic-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ic-spacing-md); } .ic_achievement__text { color: var(--ic-gray-dark); line-height: 1.7; } .ic_timeline { display: grid; gap: var(--ic-spacing-lg); position: relative; } .ic_timeline::before { content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: var(--ic-gray-medium); } .ic_timeline__item { display: flex; gap: var(--ic-spacing-xl); position: relative; } .ic_timeline__date { background: var(--ic-blue); color: var(--ic-white); padding: var(--ic-spacing-sm) var(--ic-spacing-md); border-radius: var(--ic-radius); font-weight: 600; height: fit-content; min-width: 100px; text-align: center; } .ic_timeline__content { flex: 1; background: var(--ic-white); padding: var(--ic-spacing-lg); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); } .ic_timeline__title { color: var(--ic-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--ic-spacing-sm); } .ic_timeline__text { color: var(--ic-gray-dark); line-height: 1.6; } .ic_services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ic-spacing-xl); } .ic_service { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); } .ic_service__title { color: var(--ic-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ic-spacing-lg); } .ic_service__list { list-style: none; padding: 0; } .ic_service__list li { padding: var(--ic-spacing-sm) 0; padding-left: var(--ic-spacing-xl); position: relative; color: var(--ic-gray-dark); line-height: 1.6; } .ic_service__list li::before { content: "✓"; position: absolute; left: 0; color: var(--ic-blue); font-weight: 700; } .ic_testimonial { background: var(--ic-gray-light); padding: var(--ic-spacing-2xl); border-radius: var(--ic-radius); border-left: 4px solid var(--ic-blue); } .ic_testimonial__text { font-style: italic; font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; color: var(--ic-gray-dark); margin-bottom: var(--ic-spacing-lg); } .ic_testimonial__author { font-weight: 700; color: var(--ic-primary); } .ic_takeaways { display: grid; gap: var(--ic-spacing-xl); } .ic_takeaway { background: var(--ic-white); padding: var(--ic-spacing-xl); border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-sm); } .ic_takeaway__title { color: var(--ic-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ic-spacing-md); } .ic_takeaway__text { color: var(--ic-gray-dark); line-height: 1.7; } .ic_cta-section { background: linear-gradient(135deg, var(--ic-primary) 0%, var(--ic-blue) 100%); color: var(--ic-white); padding: var(--ic-spacing-3xl); border-radius: var(--ic-radius); text-align: center; } .ic_cta__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--ic-spacing-lg); } .ic_cta__text { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--ic-spacing-2xl); opacity: 0.9; } .ic_footer { background: var(--ic-dark); color: var(--ic-white); padding: var(--ic-spacing-3xl) 0; } .ic_footer__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ic-spacing-2xl); margin-bottom: var(--ic-spacing-2xl); } .ic_footer__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--ic-spacing-md); color: var(--ic-blue); } .ic_footer__text { opacity: 0.8; line-height: 1.8; } .ic_footer__link { display: block; color: var(--ic-white); text-decoration: none; opacity: 0.8; padding: var(--ic-spacing-xs) 0; transition: var(--ic-transition); } .ic_footer__link:hover { opacity: 1; color: var(--ic-blue); } .ic_footer__link:focus-visible { outline: 2px solid var(--ic-blue); outline-offset: 2px; border-radius: var(--ic-radius-sm); } .ic_footer__bottom { text-align: center; padding-top: var(--ic-spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0.6; } @media (max-width: 768px) { .ic_header__nav { display: none; } .ic_stats { grid-template-columns: repeat(2, 1fr); gap: var(--ic-spacing-lg); } .ic_timeline::before { display: none; } .ic_timeline__item { flex-direction: column; } .ic_results-grid { grid-template-columns: repeat(2, 1fr); } .ic_services, .ic_footer__content { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ic_stats, .ic_results-grid { grid-template-columns: 1fr; } .ic_client-card__grid { grid-template-columns: 1fr; } } :root { --lbc-primary: #194A9A; --lbc-secondary: #2F62AD; --lbc-blue: #348EDF; --lbc-accent: #DF4756; --lbc-dark: #011F4E; --lbc-black: #000000; --lbc-white: #FFFFFF; --lbc-gray-50: #F9FAFB; --lbc-gray-100: #F3F4F6; --lbc-gray-200: #E5E7EB; --lbc-gray-600: #4B5563; --lbc-gray-700: #374151; --lbc-spacing-xs: 4px; --lbc-spacing-sm: 8px; --lbc-spacing-md: 16px; --lbc-spacing-lg: 24px; --lbc-spacing-xl: 32px; --lbc-spacing-2xl: 48px; --lbc-spacing-3xl: 64px; --lbc-spacing-4xl: 96px; --lbc-radius: 14px; --lbc-radius-sm: 8px; --lbc-radius-lg: 20px; --lbc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --lbc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --lbc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --lbc-transition: 300ms ease; } @keyframes lbcFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn-lbc-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--lbc-black); } .dn-lbc-hero { background: linear-gradient(135deg, var(--lbc-dark) 0%, var(--lbc-primary) 100%); padding: var(--lbc-spacing-4xl) var(--lbc-spacing-lg); text-align: center; animation: lbcFadeInUp 0.8s ease; } .dn-lbc-hero__content { max-width: 1000px; margin: 0 auto; } .dn-lbc-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--lbc-white); margin-bottom: var(--lbc-spacing-lg); line-height: 1.2; } .dn-lbc-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--lbc-blue); line-height: 1.5; } .dn-lbc-section { padding: var(--lbc-spacing-3xl) 0; animation: lbcFadeInUp 0.8s ease; } .dn-lbc-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--lbc-dark); text-align: center; margin-bottom: var(--lbc-spacing-2xl); line-height: 1.3; } .dn-lbc-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; color: var(--lbc-primary); margin: var(--lbc-spacing-xl) 0 var(--lbc-spacing-lg); } .dn-lbc-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--lbc-gray-700); margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-challenge, .dn-lbc-numbers, .dn-lbc-technical, .dn-lbc-services, .dn-lbc-table, .dn-lbc-contact { background: var(--lbc-white); } .dn-lbc-strategy, .dn-lbc-comparison, .dn-lbc-timeline, .dn-lbc-calculator, .dn-lbc-faq { background: var(--lbc-gray-50); } .dn-lbc-highlight { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); border-left: 4px solid var(--lbc-blue); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-lg); margin: var(--lbc-spacing-xl) 0; } .dn-lbc-highlight__title { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--lbc-primary); font-weight: 700; margin-right: var(--lbc-spacing-sm); } .dn-lbc-strategy__grid, .dn-lbc-tech__grid, .dn-lbc-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--lbc-spacing-xl); margin-top: var(--lbc-spacing-2xl); } .dn-lbc-strategy__item, .dn-lbc-tech__item, .dn-lbc-service { background: var(--lbc-white); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); box-shadow: var(--lbc-shadow-sm); transition: transform var(--lbc-transition), box-shadow var(--lbc-transition); } .dn-lbc-strategy__item:hover, .dn-lbc-tech__item:hover, .dn-lbc-service:hover { transform: translateY(-5px); box-shadow: var(--lbc-shadow-lg); } .dn-lbc-strategy__title, .dn-lbc-tech__title, .dn-lbc-service__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--lbc-primary); margin-bottom: var(--lbc-spacing-md); } .dn-lbc-strategy__desc, .dn-lbc-service__text { color: var(--lbc-gray-700); margin-bottom: var(--lbc-spacing-lg); line-height: 1.6; } .dn-lbc-strategy__list, .dn-lbc-tech__list { list-style: none; padding: 0; line-height: 1.8; } .dn-lbc-strategy__list li, .dn-lbc-tech__list li { position: relative; padding-left: var(--lbc-spacing-lg); margin-bottom: var(--lbc-spacing-sm); color: var(--lbc-gray-700); } .dn-lbc-strategy__list li::before, .dn-lbc-tech__list li::before { content: '✓'; position: absolute; left: 0; color: var(--lbc-blue); font-weight: 700; } .dn-lbc-results { background: linear-gradient(135deg, var(--lbc-primary) 0%, var(--lbc-secondary) 100%); color: var(--lbc-white); padding: var(--lbc-spacing-3xl) 0; } .dn-lbc-results .dn-lbc-section__title { color: var(--lbc-white); } .dn-lbc-results .dn-lbc-section__subtitle { color: var(--lbc-white); } .dn-lbc-results .dn-lbc-section__text { color: rgba(255, 255, 255, 0.9); } .dn-lbc-roi { background: rgba(255, 255, 255, 0.1); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); margin-bottom: var(--lbc-spacing-2xl); text-align: center; } .dn-lbc-roi__title { font-size: clamp(1.5rem, 2vw, 2rem); color: var(--lbc-white); margin-bottom: var(--lbc-spacing-md); } .dn-lbc-roi__value { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; color: #FFD700; } .dn-lbc-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lbc-spacing-lg); margin: var(--lbc-spacing-2xl) 0; } .dn-lbc-platform { background: rgba(255, 255, 255, 0.1); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-lg); text-align: center; transition: transform var(--lbc-transition); } .dn-lbc-platform:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); } .dn-lbc-platform__name { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; color: var(--lbc-white); margin-bottom: var(--lbc-spacing-sm); } .dn-lbc-platform__rank { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: #FFD700; margin-bottom: var(--lbc-spacing-xs); } .dn-lbc-platform__desc { font-size: clamp(0.875rem, 1vw, 1rem); color: rgba(255, 255, 255, 0.8); } .dn-lbc-warning { background: rgba(255, 255, 255, 0.95); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); margin-top: var(--lbc-spacing-2xl); color: var(--lbc-dark); } .dn-lbc-warning__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--lbc-accent); margin-bottom: var(--lbc-spacing-md); } .dn-lbc-warning__text { line-height: 1.8; } .dn-lbc-comparison__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--lbc-spacing-xl); margin-bottom: var(--lbc-spacing-2xl); } .dn-lbc-comparison__column { background: var(--lbc-white); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); box-shadow: var(--lbc-shadow-sm); } .dn-lbc-comparison__column--traditional { border-left: 4px solid var(--lbc-accent); } .dn-lbc-comparison__column--modern { border-left: 4px solid var(--lbc-blue); } .dn-lbc-comparison__column--before { background: #FFF5F5; border-left: 4px solid var(--lbc-accent); } .dn-lbc-comparison__column--after { background: #F0F9FF; border-left: 4px solid var(--lbc-blue); } .dn-lbc-comparison__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--lbc-dark); margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-comparison__list { list-style: none; padding: 0; line-height: 2; } .dn-lbc-comparison__list li { padding: var(--lbc-spacing-sm) 0; border-bottom: 1px solid var(--lbc-gray-200); } .dn-lbc-comparison__list li:last-child { border-bottom: none; } .dn-lbc-comparison__negative { color: var(--lbc-accent); } .dn-lbc-comparison__positive { color: #28A745; } .dn-lbc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lbc-spacing-xl); margin-bottom: var(--lbc-spacing-2xl); } .dn-lbc-stat { text-align: center; padding: var(--lbc-spacing-lg); background: var(--lbc-gray-50); border-radius: var(--lbc-radius); transition: transform var(--lbc-transition); } .dn-lbc-stat:hover { transform: scale(1.05); } .dn-lbc-stat__number { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--lbc-primary); margin-bottom: var(--lbc-spacing-sm); } .dn-lbc-stat__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--lbc-gray-600); text-transform: uppercase; letter-spacing: 1px; } .dn-lbc-timeline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--lbc-spacing-lg); } .dn-lbc-timeline__item { background: var(--lbc-white); border-left: 4px solid var(--lbc-blue); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-lg); transition: transform var(--lbc-transition); } .dn-lbc-timeline__item:hover { transform: translateX(5px); box-shadow: var(--lbc-shadow-md); } .dn-lbc-timeline__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; color: var(--lbc-primary); margin-bottom: var(--lbc-spacing-sm); } .dn-lbc-timeline__text { color: var(--lbc-gray-700); line-height: 1.6; } .dn-lbc-testimonial { background: var(--lbc-dark); padding: var(--lbc-spacing-3xl) 0; } .dn-lbc-testimonial__wrapper { max-width: 900px; margin: 0 auto; } .dn-lbc-testimonial__content { background: linear-gradient(135deg, var(--lbc-primary) 0%, var(--lbc-secondary) 100%); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-2xl); box-shadow: var(--lbc-shadow-lg); } .dn-lbc-testimonial__text { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.8; color: var(--lbc-white); font-style: italic; margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-testimonial__author { font-weight: 700; color: var(--lbc-blue); text-align: right; font-style: normal; } .dn-lbc-calculator__box { background: var(--lbc-white); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); box-shadow: var(--lbc-shadow-md); } .dn-lbc-calculator__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--lbc-primary); margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-calculator__list { list-style: none; padding: 0; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-lbc-table__wrapper { overflow-x: auto; margin: var(--lbc-spacing-xl) 0; } .dn-lbc-table__content { width: 100%; border-collapse: collapse; background: var(--lbc-white); border-radius: var(--lbc-radius); overflow: hidden; box-shadow: var(--lbc-shadow-md); } .dn-lbc-table__content thead { background: linear-gradient(135deg, var(--lbc-dark) 0%, var(--lbc-primary) 100%); } .dn-lbc-table__content th { padding: var(--lbc-spacing-lg); text-align: left; color: var(--lbc-white); font-weight: 600; } .dn-lbc-table__content tbody tr { border-bottom: 1px solid var(--lbc-gray-200); transition: background var(--lbc-transition); } .dn-lbc-table__content tbody tr:hover { background: var(--lbc-gray-50); } .dn-lbc-table__content td { padding: var(--lbc-spacing-lg); color: var(--lbc-gray-700); } .dn-lbc-table__positive { color: #28A745; font-weight: 700; } .dn-lbc-table__negative { color: var(--lbc-accent); font-weight: 700; } .dn-lbc-faq__grid { display: grid; gap: var(--lbc-spacing-lg); max-width: 900px; margin: 0 auto; } .dn-lbc-faq__item { background: var(--lbc-white); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); box-shadow: var(--lbc-shadow-sm); transition: transform var(--lbc-transition); } .dn-lbc-faq__item:hover { transform: translateY(-3px); box-shadow: var(--lbc-shadow-md); } .dn-lbc-faq__question { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--lbc-primary); margin-bottom: var(--lbc-spacing-md); } .dn-lbc-faq__answer { color: var(--lbc-gray-700); line-height: 1.8; } .dn-lbc-alert { background: linear-gradient(135deg, var(--lbc-accent) 0%, #C73846 100%); padding: var(--lbc-spacing-3xl) 0; color: var(--lbc-white); } .dn-lbc-alert__content { max-width: 900px; margin: 0 auto; text-align: center; } .dn-lbc-alert__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-alert__text { font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--lbc-spacing-xl); line-height: 1.6; } .dn-lbc-alert__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-alert__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto var(--lbc-spacing-xl); line-height: 2; } .dn-lbc-alert__list li { position: relative; padding-left: var(--lbc-spacing-xl); } .dn-lbc-alert__list li::before { content: '•'; position: absolute; left: 0; font-weight: 700; } .dn-lbc-alert__emphasis { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-top: var(--lbc-spacing-xl); } .dn-lbc-cta { background: linear-gradient(135deg, var(--lbc-dark) 0%, var(--lbc-primary) 100%); padding: var(--lbc-spacing-4xl) 0; color: var(--lbc-white); text-align: center; } .dn-lbc-cta__content { max-width: 900px; margin: 0 auto; } .dn-lbc-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-cta__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--lbc-spacing-2xl); color: var(--lbc-blue); } .dn-lbc-cta__box { background: rgba(255, 255, 255, 0.1); border-radius: var(--lbc-radius); padding: var(--lbc-spacing-xl); margin-bottom: var(--lbc-spacing-2xl); } .dn-lbc-cta__heading { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--lbc-spacing-lg); } .dn-lbc-cta__list { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-lbc-cta__note { margin-top: var(--lbc-spacing-lg); color: var(--lbc-blue); font-style: italic; } .dn-lbc-contact { background: var(--lbc-gray-700); padding: var(--lbc-spacing-3xl) 0; text-align: center; color: var(--lbc-white); } .dn-lbc-contact__content { max-width: 800px; margin: 0 auto; } .dn-lbc-contact__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: var(--lbc-spacing-2xl); } .dn-lbc-contact__info { margin-bottom: var(--lbc-spacing-2xl); } .dn-lbc-contact__text { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--lbc-spacing-sm); } .dn-lbc-contact__phone { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--lbc-blue); margin-bottom: var(--lbc-spacing-xl); } .dn-lbc-contact__address { color: var(--lbc-gray-200); margin-bottom: var(--lbc-spacing-xl); } .dn-lbc-contact__footer { padding-top: var(--lbc-spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.2); color: var(--lbc-gray-200); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-btn--large { padding: var(--lbc-spacing-md) var(--lbc-spacing-2xl); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } @media (prefers-reduced-motion: reduce) { .dn-lbc-hero, .dn-lbc-section, .dn-lbc-strategy__item, .dn-lbc-platform, .dn-lbc-stat, .dn-lbc-timeline__item, .dn-lbc-faq__item { animation: none; } .dn-lbc-strategy__item:hover, .dn-lbc-tech__item:hover, .dn-lbc-service:hover, .dn-lbc-platform:hover, .dn-lbc-stat:hover, .dn-lbc-timeline__item:hover, .dn-lbc-faq__item:hover { transform: none; } } @media (max-width: 768px) { .dn-lbc-section { padding: var(--lbc-spacing-2xl) var(--lbc-spacing-lg); } .dn-lbc-strategy__grid, .dn-lbc-tech__grid, .dn-lbc-services__grid, .dn-lbc-comparison__grid, .dn-lbc-timeline__grid { grid-template-columns: 1fr; } .dn-lbc-platforms { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .dn-lbc-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--lbc-spacing-md); } .dn-lbc-table__content { font-size: 0.875rem; } .dn-lbc-table__content th, .dn-lbc-table__content td { padding: var(--lbc-spacing-md); } .dn-lbc-alert__list { padding: 0 var(--lbc-spacing-lg); } } @media (max-width: 480px) { .dn-lbc-hero { padding: var(--lbc-spacing-2xl) var(--lbc-spacing-md); } .dn-lbc-platforms { grid-template-columns: 1fr; } .dn-lbc-stats { grid-template-columns: 1fr; } .dn-lbc-stat__number { font-size: 1.75rem; } } button:focus-visible, a:focus-visible { outline: 3px solid var(--lbc-blue); outline-offset: 2px; border-radius: var(--lbc-radius-sm); } .dn-lbc-section:nth-child(2) { animation-delay: 0.1s; } .dn-lbc-section:nth-child(3) { animation-delay: 0.2s; } .dn-lbc-section:nth-child(4) { animation-delay: 0.3s; } .dn-lbc-section:nth-child(5) { animation-delay: 0.4s; } .dn-lbc-section:nth-child(6) { animation-delay: 0.5s; } .dn-lbc-section:nth-child(7) { animation-delay: 0.6s; } .dn-lbc-section:nth-child(8) { animation-delay: 0.7s; } :root { --bdj-primary: #194A9A; --bdj-secondary: #2F62AD; --bdj-blue: #348EDF; --bdj-accent: #DF4756; --bdj-dark: #011F4E; --bdj-success: #00C853; --bdj-warning: #FF9F43; --bdj-purple: #A855F7; --bdj-white: #FFFFFF; --bdj-gray-50: #F8F9FA; --bdj-gray-100: #E9ECEF; --bdj-gray-200: #DEE2E6; --bdj-gray-600: #6B7280; --bdj-gray-700: #495057; --bdj-spacing-xs: 4px; --bdj-spacing-sm: 8px; --bdj-spacing-md: 16px; --bdj-spacing-lg: 24px; --bdj-spacing-xl: 32px; --bdj-spacing-2xl: 48px; --bdj-spacing-3xl: 64px; --bdj-spacing-4xl: 96px; --bdj-radius: 14px; --bdj-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --bdj-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --bdj-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --bdj-transition: 300ms ease; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_bdj-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_bdj-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--bdj-spacing-lg); } .dn_bdj-hero { background: linear-gradient(135deg, var(--bdj-dark) 0%, var(--bdj-primary) 100%); color: var(--bdj-white); padding: var(--bdj-spacing-4xl) var(--bdj-spacing-lg); text-align: center; animation: dn_bdj-fadeInUp 0.8s ease; } .dn_bdj-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--bdj-spacing-lg); line-height: 1.2; } .dn_bdj-hero__subtitle { font-size: clamp(1.25rem, 3vw, 2rem); color: var(--bdj-blue); margin-bottom: var(--bdj-spacing-2xl); font-weight: 600; } .dn_bdj-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bdj-spacing-xl); max-width: 800px; margin: 0 auto; } .dn_bdj-hero__stat { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); transition: transform var(--bdj-transition); } .dn_bdj-hero__stat:hover { transform: translateY(-5px); } .dn_bdj-hero__stat-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--bdj-spacing-sm); } .dn_bdj-hero__stat-label { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .dn_bdj-section { padding: var(--bdj-spacing-3xl) 0; background: var(--bdj-white); animation: dn_bdj-fadeInUp 0.8s ease; } .dn_bdj-section--gray { background: var(--bdj-gray-50); } .dn_bdj-section--dark { background: linear-gradient(135deg, var(--bdj-dark) 0%, var(--bdj-primary) 100%); color: var(--bdj-white); } .dn_bdj-section--results { background: linear-gradient(135deg, #E3F2FD 0%, var(--bdj-gray-50) 100%); } .dn_bdj-section--testimonial { background: linear-gradient(135deg, #3949AB 0%, #5E35B1 100%); color: var(--bdj-white); } .dn_bdj-section--urgency { background: linear-gradient(135deg, #D50000 0%, #FF1744 100%); color: var(--bdj-white); } .dn_bdj-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--bdj-spacing-xl); color: var(--bdj-dark); } .dn_bdj-section__title--white { color: var(--bdj-white); } .dn_bdj-section__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.6; margin-bottom: var(--bdj-spacing-lg); color: var(--bdj-gray-700); } .dn_bdj-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: var(--bdj-gray-700); margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-highlight-box { background: var(--bdj-white); padding: var(--bdj-spacing-lg); border-left: 4px solid var(--bdj-primary); border-radius: var(--bdj-radius); margin: var(--bdj-spacing-xl) 0; box-shadow: var(--bdj-shadow); } .dn_bdj-highlight-box__label { color: var(--bdj-primary); } .dn_bdj-strategy-grid, .dn_bdj-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--bdj-spacing-xl); } .dn_bdj-card, .dn_bdj-service-card { background: var(--bdj-white); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); box-shadow: var(--bdj-shadow); transition: all var(--bdj-transition); position: relative; } .dn_bdj-card::before, .dn_bdj-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--bdj-radius) var(--bdj-radius) 0 0; } .dn_bdj-card--geo::before, .dn_bdj-service-card--geo::before { background: var(--bdj-success); } .dn_bdj-card--local::before, .dn_bdj-service-card--seo::before { background: var(--bdj-blue); } .dn_bdj-card--review::before, .dn_bdj-service-card--gmb::before { background: var(--bdj-warning); } .dn_bdj-service-card--content::before { background: var(--bdj-purple); } .dn_bdj-service-card--cro::before { background: var(--bdj-accent); } .dn_bdj-service-card--analytics::before { background: #6200EA; } .dn_bdj-card:hover, .dn_bdj-service-card:hover { transform: translateY(-5px); box-shadow: var(--bdj-shadow-xl); } .dn_bdj-card__title, .dn_bdj-service-card__title { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--bdj-primary); margin-bottom: var(--bdj-spacing-md); font-weight: 700; } .dn_bdj-card__description, .dn_bdj-service-card__text { color: var(--bdj-gray-700); margin-bottom: var(--bdj-spacing-lg); line-height: 1.6; } .dn_bdj-card__list { list-style: none; padding: 0; } .dn_bdj-card__list li { padding-left: var(--bdj-spacing-lg); margin-bottom: var(--bdj-spacing-sm); position: relative; line-height: 1.6; } .dn_bdj-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--bdj-blue); font-weight: 700; } .dn_bdj-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bdj-spacing-xl); margin-bottom: var(--bdj-spacing-2xl); } .dn_bdj-metric { background: var(--bdj-white); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); text-align: center; box-shadow: var(--bdj-shadow); transition: transform var(--bdj-transition); } .dn_bdj-metric:hover { transform: translateY(-5px); } .dn_bdj-metric__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--bdj-spacing-sm); } .dn_bdj-metric__value--success { color: var(--bdj-success); } .dn_bdj-metric__value--primary { color: var(--bdj-blue); } .dn_bdj-metric__value--warning { color: var(--bdj-warning); } .dn_bdj-metric__value--purple { color: var(--bdj-purple); } .dn_bdj-metric__label { color: var(--bdj-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); margin-bottom: var(--bdj-spacing-xs); } .dn_bdj-metric__detail { color: var(--bdj-gray-600); font-size: clamp(0.75rem, 1vw, 0.875rem); } .dn_bdj-roi-highlight { background: var(--bdj-white); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); text-align: center; box-shadow: var(--bdj-shadow-lg); } .dn_bdj-roi-highlight__title { color: var(--bdj-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--bdj-spacing-md); } .dn_bdj-roi-highlight__value { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; color: var(--bdj-success); margin-bottom: var(--bdj-spacing-md); } .dn_bdj-roi-highlight__text { color: var(--bdj-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_bdj-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bdj-spacing-lg); margin-bottom: var(--bdj-spacing-xl); } .dn_bdj-ai-card { background: var(--bdj-gray-50); padding: var(--bdj-spacing-lg); border-radius: var(--bdj-radius); text-align: center; transition: all var(--bdj-transition); } .dn_bdj-ai-card:hover { transform: translateY(-5px); box-shadow: var(--bdj-shadow-lg); } .dn_bdj-ai-card__title { color: var(--bdj-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--bdj-spacing-sm); font-weight: 600; } .dn_bdj-ai-card__value { color: var(--bdj-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: var(--bdj-spacing-sm); } .dn_bdj-ai-card__label { color: var(--bdj-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_bdj-insight { background: #E3F2FD; padding: var(--bdj-spacing-lg); border-radius: var(--bdj-radius); margin: var(--bdj-spacing-xl) 0; } .dn_bdj-insight__label { color: var(--bdj-primary); } .dn_bdj-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--bdj-spacing-xl); } .dn_bdj-comparison__column { padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); } .dn_bdj-comparison__column:first-child { background: rgba(255, 245, 245, 0.5); border: 2px solid rgba(223, 71, 86, 0.2); } .dn_bdj-comparison__column:last-child { background: rgba(240, 249, 255, 0.5); border: 2px solid rgba(52, 142, 223, 0.2); } .dn_bdj-comparison__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-comparison__title--negative { color: var(--bdj-accent); } .dn_bdj-comparison__title--positive { color: #90EE90; } .dn_bdj-comparison__list { list-style: none; padding: 0; line-height: 2; } .dn_bdj-comparison__footer { background: rgba(255, 255, 255, 0.1); padding: var(--bdj-spacing-lg); border-radius: var(--bdj-radius); margin-top: var(--bdj-spacing-xl); text-align: center; font-size: clamp(1.125rem, 2vw, 1.25rem); } .dn_bdj-before-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bdj-spacing-xl); margin-bottom: var(--bdj-spacing-xl); } .dn_bdj-before-after__card { background: var(--bdj-white); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); box-shadow: var(--bdj-shadow); } .dn_bdj-before-after__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--bdj-spacing-lg); color: var(--bdj-primary); } .dn_bdj-before-after__stats p { margin: var(--bdj-spacing-sm) 0; color: var(--bdj-gray-700); } .dn_bdj-before-after__total { font-weight: 700; color: var(--bdj-primary); margin-top: var(--bdj-spacing-md); padding-top: var(--bdj-spacing-md); border-top: 1px solid var(--bdj-gray-200); } .dn_bdj-revenue-increase { background: linear-gradient(135deg, var(--bdj-success) 0%, #00E676 100%); color: var(--bdj-white); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); text-align: center; } .dn_bdj-revenue-increase__monthly { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: var(--bdj-spacing-sm); } .dn_bdj-revenue-increase__annual { font-size: clamp(1.125rem, 2vw, 1.25rem); opacity: 0.95; } .dn_bdj-timeline { position: relative; padding-left: var(--bdj-spacing-2xl); } .dn_bdj-timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--bdj-gray-200); } .dn_bdj-timeline__item { position: relative; margin-bottom: var(--bdj-spacing-xl); } .dn_bdj-timeline__marker { position: absolute; left: -33px; top: 5px; width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--bdj-white); box-shadow: var(--bdj-shadow); } .dn_bdj-timeline__item--phase1 .dn_bdj-timeline__marker { background: var(--bdj-success); } .dn_bdj-timeline__item--phase2 .dn_bdj-timeline__marker { background: var(--bdj-blue); } .dn_bdj-timeline__item--phase3 .dn_bdj-timeline__marker { background: var(--bdj-warning); } .dn_bdj-timeline__item--phase4 .dn_bdj-timeline__marker { background: var(--bdj-purple); } .dn_bdj-timeline__content { background: var(--bdj-white); padding: var(--bdj-spacing-lg); border-radius: var(--bdj-radius); box-shadow: var(--bdj-shadow); } .dn_bdj-timeline__title { color: var(--bdj-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--bdj-spacing-sm); font-weight: 600; } .dn_bdj-timeline__description { color: var(--bdj-gray-700); line-height: 1.6; } .dn_bdj-testimonial { max-width: 900px; margin: 0 auto; text-align: center; } .dn_bdj-testimonial__quote { font-size: 3rem; margin-bottom: var(--bdj-spacing-lg); opacity: 0.3; } .dn_bdj-testimonial__text { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; font-style: italic; margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-testimonial__author { font-size: clamp(1rem, 1.5vw, 1.125rem); opacity: 0.9; } .dn_bdj-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bdj-spacing-xl); } .dn_bdj-tech-card { padding: var(--bdj-spacing-lg); } .dn_bdj-tech-card__title { color: var(--bdj-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--bdj-spacing-md); font-weight: 600; } .dn_bdj-tech-card__list { list-style: none; padding: 0; line-height: 1.8; } .dn_bdj-tech-card__list li { padding-left: var(--bdj-spacing-lg); margin-bottom: var(--bdj-spacing-sm); position: relative; } .dn_bdj-tech-card__list li::before { content: "•"; position: absolute; left: 0; color: var(--bdj-blue); } .dn_bdj-calculator { background: var(--bdj-white); border: 2px solid var(--bdj-primary); padding: var(--bdj-spacing-2xl); border-radius: var(--bdj-radius); text-align: center; } .dn_bdj-calculator__title { color: var(--bdj-primary); font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-calculator__subtitle { color: var(--bdj-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--bdj-spacing-xl); } .dn_bdj-calculator__box { background: var(--bdj-gray-50); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); margin-bottom: var(--bdj-spacing-xl); } .dn_bdj-calculator__label { color: var(--bdj-dark); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--bdj-spacing-md); } .dn_bdj-calculator__text { color: var(--bdj-gray-700); line-height: 1.8; } .dn_bdj-calculator__result { color: var(--bdj-primary); } .dn_bdj-button { display: inline-block; padding: var(--bdj-spacing-md) var(--bdj-spacing-xl); border-radius: var(--bdj-radius); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: all var(--bdj-transition); cursor: pointer; } .dn_bdj-button--primary { background: var(--bdj-primary); color: var(--bdj-white); } .dn_bdj-button--primary:hover { background: var(--bdj-secondary); transform: translateY(-2px); box-shadow: var(--bdj-shadow-lg); } .dn_bdj-button--primary:focus-visible { outline: 3px solid var(--bdj-blue); outline-offset: 2px; } .dn_bdj-button--accent { background: var(--bdj-white); color: var(--bdj-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); } .dn_bdj-button--accent:hover { background: var(--bdj-gray-50); transform: translateY(-2px); box-shadow: var(--bdj-shadow-xl); } .dn_bdj-button--accent:focus-visible { outline: 3px solid var(--bdj-white); outline-offset: 2px; } .dn_bdj-services-cta { text-align: center; margin-top: var(--bdj-spacing-xl); } .dn_bdj-link { color: var(--bdj-primary); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: color var(--bdj-transition); } .dn_bdj-link:hover { color: var(--bdj-blue); text-decoration: underline; } .dn_bdj-link:focus-visible { outline: 2px solid var(--bdj-blue); outline-offset: 2px; } .dn_bdj-table-wrapper { overflow-x: auto; margin: var(--bdj-spacing-xl) 0; } .dn_bdj-table { width: 100%; border-collapse: collapse; background: var(--bdj-white); box-shadow: var(--bdj-shadow-lg); border-radius: var(--bdj-radius); overflow: hidden; } .dn_bdj-table thead { background: linear-gradient(135deg, var(--bdj-dark) 0%, var(--bdj-primary) 100%); } .dn_bdj-table th { padding: var(--bdj-spacing-lg); text-align: left; color: var(--bdj-white); font-weight: 600; } .dn_bdj-table th:not(:first-child) { text-align: center; } .dn_bdj-table tbody tr { border-bottom: 1px solid var(--bdj-gray-200); } .dn_bdj-table tbody tr:nth-child(even) { background: var(--bdj-gray-50); } .dn_bdj-table tbody tr:hover { background: #E8F4FD; } .dn_bdj-table td { padding: var(--bdj-spacing-lg); } .dn_bdj-table td:not(:first-child) { text-align: center; } .dn_bdj-table__success { color: var(--bdj-success); font-weight: 700; } .dn_bdj-table__danger { color: var(--bdj-accent); } .dn_bdj-faq { max-width: 900px; margin: 0 auto; } .dn_bdj-faq__item { margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-faq__question { color: var(--bdj-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--bdj-spacing-md); font-weight: 600; } .dn_bdj-faq__answer { color: var(--bdj-gray-700); line-height: 1.8; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_bdj-urgency__text { font-size: clamp(1.125rem, 2vw, 1.25rem); text-align: center; margin-bottom: var(--bdj-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .dn_bdj-urgency__box { background: rgba(255, 255, 255, 0.1); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); margin-bottom: var(--bdj-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .dn_bdj-urgency__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-urgency__list { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_bdj-urgency__list li { padding-left: var(--bdj-spacing-lg); margin-bottom: var(--bdj-spacing-sm); position: relative; } .dn_bdj-urgency__list li::before { content: "•"; position: absolute; left: 0; } .dn_bdj-urgency__warning { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; text-align: center; } .dn_bdj-cta { background: linear-gradient(135deg, var(--bdj-dark) 0%, var(--bdj-primary) 100%); padding: var(--bdj-spacing-4xl) var(--bdj-spacing-lg); text-align: center; color: var(--bdj-white); } .dn_bdj-cta__title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--bdj-spacing-xl); opacity: 0.95; } .dn_bdj-cta__benefits { background: rgba(255, 255, 255, 0.1); padding: var(--bdj-spacing-xl); border-radius: var(--bdj-radius); margin-bottom: var(--bdj-spacing-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .dn_bdj-cta__label { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--bdj-spacing-lg); } .dn_bdj-cta__text { line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_bdj-cta__note { margin-top: var(--bdj-spacing-lg); opacity: 0.8; font-size: clamp(0.875rem, 1vw, 1rem); } .dn_bdj-footer { background: var(--bdj-dark); padding: var(--bdj-spacing-xl) var(--bdj-spacing-lg); text-align: center; } .dn_bdj-footer__links { color: var(--bdj-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_bdj-footer__link { color: var(--bdj-primary); text-decoration: none; margin: 0 var(--bdj-spacing-md); transition: color var(--bdj-transition); } .dn_bdj-footer__link:hover { color: var(--bdj-blue); } .dn_bdj-footer__link:focus-visible { outline: 2px solid var(--bdj-blue); outline-offset: 2px; } @media (max-width: 768px) { .dn_bdj-hero__stats, .dn_bdj-strategy-grid, .dn_bdj-metrics, .dn_bdj-ai-grid, .dn_bdj-comparison, .dn_bdj-before-after, .dn_bdj-tech-grid, .dn_bdj-services-grid { grid-template-columns: 1fr; } .dn_bdj-timeline { padding-left: var(--bdj-spacing-xl); } .dn_bdj-table { font-size: 0.875rem; } .dn_bdj-table th, .dn_bdj-table td { padding: var(--bdj-spacing-md); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-50: #F9FAFB; --dn-gray-100: #F3F4F6; --dn-gray-200: #E5E7EB; --dn-gray-300: #D1D5DB; --dn-gray-400: #9CA3AF; --dn-gray-500: #6B7280; --dn-gray-600: #4B5563; --dn-gray-700: #374151; --dn-gray-800: #1F2937; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --dn-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --dn-shadow-lg: 0 10px 25px rgba(0,0,0,0.1); --dn-shadow-xl: 0 20px 40px rgba(0,0,0,0.15); --dn-transition: 300ms ease; } @media (prefers-reduced-motion: no-preference) { .dn-case-hero, .dn-case-summary, .dn-case-dashboard, .dn-case-competitive, .dn-case-opportunity, .dn-case-channels, .dn-case-roadmap, .dn-case-roi, .dn-case-competitor, .dn-case-actions, .dn-case-cta, .dn-case-conclusion, .dn-case-footer { animation: dnFadeInUp 0.8s ease-out; animation-fill-mode: both; } @keyframes dnFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } } .dn-case-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dn-gray-800); background: var(--dn-white); } .dn-case-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn-case-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-spacing-4xl) 0; text-align: center; } .dn-case-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--dn-spacing-lg); } .dn-case-hero__subtitle { display: block; font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 400; margin-top: var(--dn-spacing-md); opacity: 0.95; } .dn-case-hero__description { font-size: clamp(1.125rem, 2vw, 1.375rem); max-width: 900px; margin: 0 auto; opacity: 0.95; } .dn-case-summary { background: var(--dn-gray-50); padding: var(--dn-spacing-3xl) 0; } .dn-case-summary__card { background: #FFF9E6; border-left: 5px solid var(--dn-accent); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); } .dn-case-summary__title { color: var(--dn-dark); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--dn-spacing-xl); } .dn-case-summary__content p { color: var(--dn-gray-700); line-height: 1.8; margin-bottom: var(--dn-spacing-lg); } .dn-case-summary__content p:last-child { margin-bottom: 0; } .dn-case-highlight { color: var(--dn-accent); } .dn-case-dashboard { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; } .dn-case-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-2xl); font-weight: 700; } .dn-case-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-spacing-xl); } .dn-case-card { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-lg); border: 1px solid var(--dn-gray-200); transition: transform var(--dn-transition), box-shadow var(--dn-transition); } .dn-case-card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-xl); } .dn-case-card__header { display: flex; align-items: center; gap: var(--dn-spacing-md); margin-bottom: var(--dn-spacing-lg); } .dn-case-badge { display: inline-flex; padding: var(--dn-spacing-xs) var(--dn-spacing-md); border-radius: 5px; font-weight: 700; font-size: 0.875rem; } .dn-case-badge--warning { background: #FFC107; color: var(--dn-dark); } .dn-case-badge--success { background: #28A745; color: var(--dn-white); } .dn-case-badge--danger { background: var(--dn-accent); color: var(--dn-white); } .dn-case-card__title { color: var(--dn-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; margin: 0; } .dn-case-card__list { list-style: none; padding: 0; margin: 0 0 var(--dn-spacing-lg) 0; } .dn-case-card__item { padding: var(--dn-spacing-xs) 0; line-height: 1.5; color: var(--dn-gray-700); } .dn-case-card__item--success { color: #059669; } .dn-case-card__item--warning { color: #D97706; } .dn-case-card__item--danger { color: var(--dn-accent); } .dn-case-card__stats { background: var(--dn-gray-50); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); margin-top: var(--dn-spacing-lg); } .dn-case-card__stats p { margin: var(--dn-spacing-xs) 0; color: var(--dn-gray-700); font-size: 0.875rem; } .dn-case-competitive { background: var(--dn-gray-50); padding: var(--dn-spacing-3xl) 0; } .dn-case-table-wrapper { overflow-x: auto; border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); } .dn-case-table { width: 100%; border-collapse: collapse; background: var(--dn-white); } .dn-case-table thead { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); } .dn-case-table th { padding: var(--dn-spacing-lg); text-align: left; color: var(--dn-white); font-weight: 600; } .dn-case-table tbody tr { border-bottom: 1px solid var(--dn-gray-200); transition: background var(--dn-transition); } .dn-case-table tbody tr:last-child { border-bottom: none; } .dn-case-table tbody tr:hover { background: var(--dn-gray-50); } .dn-case-table td { padding: var(--dn-spacing-lg); color: var(--dn-gray-700); } .dn-case-table__cell--danger { color: var(--dn-accent); font-weight: 600; } .dn-case-table__cell--success { color: #059669; font-weight: 600; } .dn-case-table__cell--bold { font-weight: 700; color: var(--dn-dark); } .dn-case-opportunity { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; } .dn-case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-2xl); } .dn-case-stat { background: var(--dn-white); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); text-align: center; box-shadow: var(--dn-shadow-md); transition: transform var(--dn-transition); } .dn-case-stat:hover { transform: translateY(-5px); } .dn-case-stat--current { background: #FFF9E6; border: 2px solid var(--dn-accent); } .dn-case-stat--potential { background: linear-gradient(135deg, rgba(25,74,154,0.05) 0%, rgba(52,142,223,0.05) 100%); border: 2px solid var(--dn-primary); } .dn-case-stat__title { color: var(--dn-dark); font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--dn-spacing-lg); font-weight: 600; } .dn-case-stat__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn-case-stat__value--danger { color: var(--dn-accent); } .dn-case-stat__value--success { color: #059669; } .dn-case-stat__label { color: var(--dn-gray-600); font-size: 0.875rem; margin-bottom: var(--dn-spacing-lg); } .dn-case-loss-banner { background: var(--dn-accent); color: var(--dn-white); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); text-align: center; } .dn-case-loss-banner__title { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: var(--dn-spacing-lg); } .dn-case-loss-banner__amount { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); } .dn-case-loss-banner__description { font-size: clamp(1rem, 1.5vw, 1.25rem); opacity: 0.95; } .dn-case-channels { background: var(--dn-gray-50); padding: var(--dn-spacing-3xl) 0; } .dn-case-channel { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-spacing-2xl); margin-bottom: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-sm); } .dn-case-channel--critical { border: 2px solid var(--dn-accent); } .dn-case-channel__title { color: var(--dn-primary); font-size: clamp(1.375rem, 2vw, 1.75rem); margin-bottom: var(--dn-spacing-xl); padding-bottom: var(--dn-spacing-md); border-bottom: 2px solid var(--dn-gray-200); font-weight: 600; } .dn-case-channel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); } .dn-case-channel__column h4 { color: var(--dn-dark); font-size: 1.125rem; margin-bottom: var(--dn-spacing-md); font-weight: 600; } .dn-case-channel__column ul { list-style: none; padding: 0; line-height: 1.8; color: var(--dn-gray-700); } .dn-case-channel__column ul li { padding: var(--dn-spacing-xs) 0; } .dn-case-channel__finding { background: var(--dn-gray-50); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-sm); margin-top: var(--dn-spacing-lg); color: var(--dn-gray-700); } .dn-case-alert { background: #FFF9E6; border-left: 5px solid var(--dn-accent); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-sm); margin-bottom: var(--dn-spacing-xl); } .dn-case-alert__title { color: var(--dn-accent); font-size: 1.25rem; display: block; margin-bottom: var(--dn-spacing-md); } .dn-case-alert p { color: var(--dn-gray-700); margin: 0; line-height: 1.8; } .dn-case-roadmap { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-spacing-3xl) 0; } .dn-case-section__title--white { color: var(--dn-white); } .dn-case-roadmap__subtitle { text-align: center; font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--dn-spacing-2xl); opacity: 0.95; } .dn-case-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn-case-phase { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); border: 1px solid rgba(255,255,255,0.2); } .dn-case-phase__title { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--dn-spacing-lg); font-weight: 600; } .dn-case-phase__list { list-style: none; padding: 0; margin-bottom: var(--dn-spacing-lg); line-height: 2; } .dn-case-phase__list li { padding: var(--dn-spacing-xs) 0; opacity: 0.95; } .dn-case-phase__result { background: rgba(255,255,255,0.2); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); font-size: 0.875rem; } .dn-case-roi { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; } .dn-case-roi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-spacing-xl); } .dn-case-roi__card { padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); } .dn-case-roi__card--current { background: #FFF9E6; border: 2px solid var(--dn-accent); } .dn-case-roi__card--recommended { background: linear-gradient(135deg, rgba(25,74,154,0.05) 0%, rgba(52,142,223,0.05) 100%); border: 2px solid var(--dn-primary); } .dn-case-roi__title { color: var(--dn-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-lg); text-align: center; font-weight: 600; } .dn-case-roi__metrics { margin-bottom: var(--dn-spacing-lg); } .dn-case-roi__metric { display: flex; justify-content: space-between; padding: var(--dn-spacing-sm) 0; border-bottom: 1px solid rgba(0,0,0,0.1); color: var(--dn-gray-700); } .dn-case-roi__metric:last-child { border-bottom: none; } .dn-case-roi__metric strong { color: var(--dn-dark); } .dn-case-roi__metric--danger { color: var(--dn-accent); } .dn-case-roi__metric--success { color: #059669; } .dn-case-roi__summary { background: rgba(0,0,0,0.05); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-sm); text-align: center; font-size: 1.125rem; color: var(--dn-dark); } .dn-case-competitor { background: var(--dn-gray-50); padding: var(--dn-spacing-3xl) 0; } .dn-case-example { background: var(--dn-white); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); } .dn-case-example__title { color: var(--dn-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-lg); font-weight: 600; } .dn-case-example__list { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--dn-spacing-lg); color: var(--dn-gray-700); } .dn-case-example__list li { padding: var(--dn-spacing-xs) 0; } .dn-case-example__insight { background: #FFF9E6; padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-sm); color: var(--dn-gray-700); } .dn-case-actions { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; } .dn-case-actions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); } .dn-case-action { background: var(--dn-white); border: 2px solid var(--dn-gray-200); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); transition: transform var(--dn-transition), border-color var(--dn-transition); } .dn-case-action:hover { transform: translateY(-5px); border-color: var(--dn-primary); } .dn-case-action__title { color: var(--dn-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-spacing-lg); font-weight: 600; } .dn-case-action__list { padding-left: var(--dn-spacing-lg); line-height: 2; color: var(--dn-gray-700); } .dn-case-action__list li { padding: var(--dn-spacing-xs) 0; } .dn-case-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-spacing-4xl) 0; text-align: center; } .dn-case-cta__title { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn-case-cta__description { font-size: clamp(1.125rem, 2vw, 1.375rem); max-width: 800px; margin: 0 auto var(--dn-spacing-2xl); line-height: 1.8; opacity: 0.95; } .dn-case-cta__steps { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius); max-width: 600px; margin: 0 auto var(--dn-spacing-2xl); border: 1px solid rgba(255,255,255,0.2); } .dn-case-cta__steps h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-lg); font-weight: 600; } .dn-case-cta__steps ol { text-align: left; padding-left: var(--dn-spacing-xl); line-height: 2; opacity: 0.95; } .dn-case-cta__steps li { padding: var(--dn-spacing-xs) 0; } .dn-case-btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-2xl); border-radius: var(--dn-radius); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.25rem); transition: all var(--dn-transition); margin-bottom: var(--dn-spacing-xl); } .dn-case-btn--primary { background: var(--dn-accent); color: var(--dn-white); box-shadow: 0 4px 15px rgba(223,71,86,0.3); } .dn-case-btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,71,86,0.4); } .dn-case-btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 3px; } .dn-case-cta__contact { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; opacity: 0.95; } .dn-case-conclusion { background: var(--dn-gray-50); padding: var(--dn-spacing-3xl) 0; } .dn-case-conclusion p { color: var(--dn-gray-700); line-height: 1.8; margin-bottom: var(--dn-spacing-lg); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-case-conclusion p:last-child { margin-bottom: 0; } .dn-case-footer { background: var(--dn-white); padding: var(--dn-spacing-2xl) 0; border-top: 1px solid var(--dn-gray-200); } .dn-case-footer p { color: var(--dn-gray-600); text-align: center; margin-bottom: var(--dn-spacing-lg); font-size: 0.875rem; line-height: 1.8; } .dn-case-footer p:last-child { margin-bottom: 0; } .dn-case-link { color: var(--dn-primary); text-decoration: none; transition: color var(--dn-transition); font-weight: 600; } .dn-case-link:hover { color: var(--dn-blue); text-decoration: underline; } .dn-case-link:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; border-radius: var(--dn-radius-sm); } @media (max-width: 768px) { .dn-case-container { padding: 0 var(--dn-spacing-md); } .dn-case-hero { padding: var(--dn-spacing-3xl) 0; } .dn-case-cards, .dn-case-stats, .dn-case-timeline, .dn-case-roi__grid, .dn-case-actions__grid { grid-template-columns: 1fr; } .dn-case-table { font-size: 0.875rem; } .dn-case-table th, .dn-case-table td { padding: var(--dn-spacing-md); } .dn-case-channel__grid { grid-template-columns: 1fr; } .dn-case-section__title { font-size: 1.75rem; } } @media (max-width: 480px) { .dn-case-hero__title { font-size: 1.5rem; } .dn-case-hero__subtitle { font-size: 1rem; } .dn-case-hero__description { font-size: 0.875rem; } .dn-case-summary__card, .dn-case-card, .dn-case-phase, .dn-case-action { padding: var(--dn-spacing-lg); } .dn-case-table { font-size: 0.75rem; } .dn-case-table th, .dn-case-table td { padding: var(--dn-spacing-sm); } } :root { --grok-primary: #194A9A; --grok-secondary: #2F62AD; --grok-blue: #348EDF; --grok-accent: #DF4756; --grok-dark: #011F4E; --grok-black: #000000; --grok-white: #FFFFFF; --grok-gray-50: #F8F9FA; --grok-gray-100: #F3F4F6; --grok-gray-200: #E5E7EB; --grok-gray-300: #D1D5DB; --grok-gray-600: #4B5563; --grok-gray-700: #374151; --grok-spacing-xs: 4px; --grok-spacing-sm: 8px; --grok-spacing-md: 16px; --grok-spacing-lg: 24px; --grok-spacing-xl: 32px; --grok-spacing-2xl: 48px; --grok-spacing-3xl: 64px; --grok-radius: 14px; --grok-radius-sm: 8px; --grok-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --grok-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --grok-transition: 300ms ease; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes grokFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .grok_wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--grok-gray-700); } .grok_hero { background: linear-gradient(135deg, var(--grok-dark) 0%, var(--grok-primary) 100%); padding: var(--grok-spacing-3xl) 0; color: var(--grok-white); animation: grokFadeIn 0.6s ease; } .grok_hero__content { max-width: 900px; margin: 0 auto; text-align: center; } .grok_hero__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; margin-bottom: var(--grok-spacing-lg); opacity: 0.95; animation: grokFadeIn 0.8s ease 0.1s both; } .grok_hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--grok-spacing-xl); opacity: 0.9; animation: grokFadeIn 0.8s ease 0.2s both; } .grok_hero__stat { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); max-width: 700px; margin: 0 auto; animation: grokFadeIn 0.8s ease 0.3s both; } .grok_hero__stat p { font-size: clamp(1.125rem, 2vw, 1.25rem); margin: 0; } .grok_toc-section { background: var(--grok-gray-50); padding: var(--grok-spacing-2xl) 0; } .grok_content { background: var(--grok-white); } .grok_section { padding: var(--grok-spacing-3xl) 0; animation: grokFadeIn 0.6s ease; } .grok_section--alt { background: var(--grok-gray-50); } .grok_section--future { background: linear-gradient(135deg, var(--grok-gray-50) 0%, var(--grok-white) 100%); } .grok_section__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--grok-dark); margin-bottom: var(--grok-spacing-xl); text-align: center; animation: grokFadeIn 0.6s ease; } .grok_section__subtitle { font-size: clamp(1.5rem, 2.5vw, 1.75rem); font-weight: 600; color: var(--grok-primary); margin: var(--grok-spacing-2xl) 0 var(--grok-spacing-lg); animation: grokFadeIn 0.6s ease 0.1s both; } .grok_section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--grok-spacing-lg); animation: grokFadeIn 0.6s ease 0.2s both; } .grok_components { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_component { background: var(--grok-gray-50); padding: var(--grok-spacing-lg); border-radius: var(--grok-radius); border-top: 3px solid var(--grok-blue); transition: transform var(--grok-transition), box-shadow var(--grok-transition); animation: grokFadeIn 0.6s ease 0.3s both; } .grok_component:hover { transform: translateY(-4px); box-shadow: var(--grok-shadow-lg); } .grok_component:focus-visible { outline: 2px solid var(--grok-blue); outline-offset: 2px; } .grok_component__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_component__text { color: var(--grok-gray-700); line-height: 1.6; } .grok_list { list-style: none; padding: 0; margin: var(--grok-spacing-lg) 0; animation: grokFadeIn 0.6s ease 0.4s both; } .grok_list li { position: relative; padding: var(--grok-spacing-sm) 0; padding-left: var(--grok-spacing-lg); line-height: 1.8; } .grok_list li::before { content: "•"; position: absolute; left: 0; color: var(--grok-blue); font-weight: bold; } .grok_list--ordered { counter-reset: list-counter; } .grok_list--ordered li { counter-increment: list-counter; } .grok_list--ordered li::before { content: counter(list-counter) "."; } .grok_table-wrapper { overflow-x: auto; margin: var(--grok-spacing-xl) 0; animation: grokFadeIn 0.6s ease 0.3s both; } .grok_table { width: 100%; border-collapse: collapse; background: var(--grok-white); border-radius: var(--grok-radius); overflow: hidden; box-shadow: var(--grok-shadow); } .grok_table thead { background: linear-gradient(135deg, var(--grok-dark) 0%, var(--grok-primary) 100%); } .grok_table th { padding: var(--grok-spacing-md); text-align: center; color: var(--grok-white); font-weight: 600; font-size: clamp(0.875rem, 1vw, 1rem); } .grok_table th:first-child { text-align: left; } .grok_table tbody tr { border-bottom: 1px solid var(--grok-gray-200); transition: background var(--grok-transition); } .grok_table tbody tr:hover { background: var(--grok-gray-50); } .grok_table tbody tr:focus-visible { outline: 2px solid var(--grok-blue); outline-offset: -2px; } .grok_table tbody tr:nth-child(even) { background: var(--grok-gray-50); } .grok_table td { padding: var(--grok-spacing-md); text-align: center; font-size: clamp(0.875rem, 1vw, 1rem); } .grok_table td:first-child { text-align: left; font-weight: 600; } .grok_fundamentals { margin: var(--grok-spacing-xl) 0; } .grok_pillar { background: var(--grok-white); border: 1px solid var(--grok-gray-200); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin-bottom: var(--grok-spacing-lg); transition: box-shadow var(--grok-transition); animation: grokFadeIn 0.6s ease; } .grok_pillar:hover { box-shadow: var(--grok-shadow-lg); } .grok_pillar__title { font-size: clamp(1.25rem, 1.5vw, 1.375rem); font-weight: 600; color: var(--grok-blue); margin-bottom: var(--grok-spacing-md); } .grok_pillar__text { margin-bottom: var(--grok-spacing-md); line-height: 1.7; } .grok_signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_signal { padding: var(--grok-spacing-lg); border-radius: var(--grok-radius); transition: transform var(--grok-transition); animation: grokFadeIn 0.6s ease; } .grok_signal:hover { transform: translateY(-4px); } .grok_signal--high { background: #E8F5E9; } .grok_signal--medium { background: #FFF3E0; } .grok_signal--negative { background: #FFEBEE; } .grok_signal__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; margin-bottom: var(--grok-spacing-md); } .grok_signal__list { list-style: none; padding: 0; } .grok_signal__list li { padding: var(--grok-spacing-xs) 0; line-height: 1.6; } .grok_strategy { background: var(--grok-gray-50); border-left: 4px solid var(--grok-blue); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin-bottom: var(--grok-spacing-lg); animation: grokFadeIn 0.6s ease; } .grok_strategy__title { font-size: clamp(1.25rem, 1.5vw, 1.375rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_strategy__content { margin: var(--grok-spacing-md) 0; } .grok_strategy__label { font-weight: 600; margin-bottom: var(--grok-spacing-sm); } .grok_strategy__impact { margin-top: var(--grok-spacing-md); padding-top: var(--grok-spacing-md); border-top: 1px solid var(--grok-gray-200); color: var(--grok-blue); font-weight: 600; } .grok_checklist { background: var(--grok-white); border: 2px solid var(--grok-blue); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_checklist__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-md); } .grok_checklist__list { list-style: none; padding: 0; } .grok_checklist__list li { padding: var(--grok-spacing-sm) 0; line-height: 1.8; } .grok_code { margin: var(--grok-spacing-lg) 0; } .grok_code__title { font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_code__block { background: var(--grok-gray-100); border: 1px solid var(--grok-gray-300); border-radius: var(--grok-radius-sm); padding: var(--grok-spacing-lg); font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.6; overflow-x: auto; white-space: pre; } .grok_tactics { background: var(--grok-gray-50); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_tactics__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--grok-dark); margin: var(--grok-spacing-lg) 0 var(--grok-spacing-md); } .grok_tactics__text { margin-bottom: var(--grok-spacing-md); } .grok_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_kpi { background: var(--grok-white); border: 1px solid var(--grok-gray-200); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); transition: box-shadow var(--grok-transition); animation: grokFadeIn 0.6s ease; } .grok_kpi:hover { box-shadow: var(--grok-shadow-lg); } .grok_kpi__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_tools { margin: var(--grok-spacing-xl) 0; } .grok_tool { background: var(--grok-gray-50); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin-bottom: var(--grok-spacing-lg); } .grok_tool__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-md); } .grok_advanced { margin: var(--grok-spacing-xl) 0; } .grok_advanced__card { border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin-bottom: var(--grok-spacing-lg); transition: transform var(--grok-transition); animation: grokFadeIn 0.6s ease; } .grok_advanced__card:hover { transform: translateX(4px); } .grok_advanced__card--network { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); } .grok_advanced__card--semantic { background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%); } .grok_advanced__card--predictive { background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); } .grok_advanced__title { font-size: clamp(1.375rem, 1.75vw, 1.5rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-md); } .grok_advanced__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 500; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_advanced__text { margin-bottom: var(--grok-spacing-md); line-height: 1.7; } .grok_advanced__result { margin-top: var(--grok-spacing-md); padding-top: var(--grok-spacing-md); border-top: 1px solid rgba(0, 0, 0, 0.1); font-weight: 600; color: var(--grok-blue); } .grok_future { background: var(--grok-dark); color: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin-bottom: var(--grok-spacing-xl); } .grok_future__title { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--grok-spacing-xl); text-align: center; } .grok_future__item { margin-bottom: var(--grok-spacing-lg); padding-bottom: var(--grok-spacing-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .grok_future__item:last-child { border-bottom: none; } .grok_future__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--grok-blue); margin-bottom: var(--grok-spacing-md); } .grok_future__text { opacity: 0.95; line-height: 1.7; } .grok_preparation { background: var(--grok-gray-50); border: 2px solid var(--grok-blue); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); } .grok_preparation__title { font-size: clamp(1.25rem, 1.5vw, 1.375rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-md); } .grok_preparation__list { list-style: none; padding: 0; } .grok_preparation__list li { padding: var(--grok-spacing-sm) 0; line-height: 1.8; } .grok_cta { background: linear-gradient(135deg, var(--grok-dark) 0%, var(--grok-primary) 100%); padding: var(--grok-spacing-3xl) 0; color: var(--grok-white); text-align: center; animation: grokFadeIn 0.6s ease; } .grok_cta__content { max-width: 800px; margin: 0 auto; } .grok_cta__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--grok-spacing-lg); animation: grokFadeIn 0.6s ease 0.1s both; } .grok_cta__text { font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--grok-spacing-xl); opacity: 0.95; animation: grokFadeIn 0.6s ease 0.2s both; } .grok_cta__box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); animation: grokFadeIn 0.6s ease 0.3s both; } .grok_cta__subtitle { font-size: clamp(1.375rem, 1.75vw, 1.5rem); margin-bottom: var(--grok-spacing-lg); } .grok_cta__list { list-style: none; padding: 0; text-align: left; max-width: 500px; margin: 0 auto; } .grok_cta__list li { position: relative; padding: var(--grok-spacing-sm) 0 var(--grok-spacing-sm) var(--grok-spacing-xl); line-height: 1.8; font-size: clamp(1rem, 1.25vw, 1.125rem); } .grok_cta__list li::before { content: counter(list-item) "."; position: absolute; left: 0; font-weight: bold; color: var(--grok-blue); } .grok_summary { background: var(--grok-gray-50); padding: var(--grok-spacing-3xl) 0; } .grok_summary__content { background: var(--grok-white); border-left: 4px solid var(--grok-dark); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); box-shadow: var(--grok-shadow); animation: grokFadeIn 0.6s ease; } .grok_summary__title { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-lg); } .grok_summary__list { list-style: none; padding: 0; } .grok_summary__list li { padding: var(--grok-spacing-sm) 0; line-height: 1.8; font-size: clamp(1rem, 1.25vw, 1.125rem); } .grok_tips { background: #FFF3E0; padding: var(--grok-spacing-2xl) 0; } .grok_tips__content { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); box-shadow: var(--grok-shadow); animation: grokFadeIn 0.6s ease; } .grok_tips__title { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-lg); } .grok_tips__list { list-style: none; padding: 0; } .grok_tips__list li { position: relative; padding: var(--grok-spacing-sm) 0 var(--grok-spacing-sm) var(--grok-spacing-lg); line-height: 1.8; font-size: clamp(1rem, 1.25vw, 1.125rem); } .grok_tips__list li::before { content: "•"; position: absolute; left: 0; color: var(--grok-accent); font-weight: bold; } @media (max-width: 768px) { .grok_section { padding: var(--grok-spacing-2xl) var(--grok-spacing-md); } .grok_components, .grok_signals, .grok_kpis { grid-template-columns: 1fr; } .grok_table { font-size: 0.875rem; } .grok_table th, .grok_table td { padding: var(--grok-spacing-sm); } .grok_code__block { padding: var(--grok-spacing-md); font-size: 0.75rem; } } :root { --grok-primary: #194A9A; --grok-secondary: #2F62AD; --grok-blue: #348EDF; --grok-accent: #DF4756; --grok-dark: #011F4E; --grok-black: #000000; --grok-white: #FFFFFF; --grok-gray-50: #F9FAFB; --grok-gray-100: #F3F4F6; --grok-gray-200: #E5E7EB; --grok-gray-300: #D1D5DB; --grok-gray-600: #4B5563; --grok-gray-700: #374151; --grok-spacing-xs: 4px; --grok-spacing-sm: 8px; --grok-spacing-md: 16px; --grok-spacing-lg: 24px; --grok-spacing-xl: 32px; --grok-spacing-2xl: 48px; --grok-spacing-3xl: 64px; --grok-spacing-4xl: 96px; --grok-radius: 14px; --grok-radius-sm: 8px; --grok-radius-lg: 20px; --grok-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --grok-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --grok-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --grok-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2); --grok-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes grokFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .grok_wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--grok-black); } .grok_hero { background: linear-gradient(135deg, var(--grok-dark) 0%, var(--grok-primary) 100%); padding: clamp(var(--grok-spacing-3xl), 8vw, var(--grok-spacing-4xl)) 0; position: relative; overflow: hidden; animation: grokFadeInUp 0.8s ease; } .grok_hero::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .grok_hero__content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .grok_hero__lead { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--grok-white); margin-bottom: var(--grok-spacing-lg); line-height: 1.7; animation: grokFadeInUp 0.9s ease; } .grok_hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--grok-spacing-xl); line-height: 1.6; animation: grokFadeInUp 1s ease; } .grok_hero__stat { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); animation: grokFadeInUp 1.1s ease; } .grok_hero__stat p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-white); } .grok_toc-section { background: var(--grok-gray-50); padding: var(--grok-spacing-2xl) 0; animation: grokFadeInUp 1.2s ease; } .grok_content { background: var(--grok-gray-50); } .grok_section { padding: var(--grok-spacing-3xl) 0; animation: grokFadeInUp 0.8s ease; } .grok_section--alt { background: var(--grok-white); } .grok_section--future { background: linear-gradient(135deg, var(--grok-gray-50) 0%, var(--grok-white) 100%); } .grok_section__title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; color: var(--grok-dark); margin-bottom: var(--grok-spacing-xl); text-align: center; animation: grokFadeInUp 0.8s ease; } .grok_section__subtitle { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; color: var(--grok-primary); margin: var(--grok-spacing-2xl) 0 var(--grok-spacing-lg); animation: grokFadeInUp 0.9s ease; } .grok_section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--grok-gray-700); margin-bottom: var(--grok-spacing-lg); animation: grokFadeInUp 1s ease; } .grok_components { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_component { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); box-shadow: var(--grok-shadow-sm); transition: transform var(--grok-transition), box-shadow var(--grok-transition); animation: grokFadeInUp 1s ease; } .grok_component:hover { transform: translateY(-5px); box-shadow: var(--grok-shadow-lg); } .grok_component__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_component__text { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.7; color: var(--grok-gray-600); } .grok_list { list-style: none; padding: 0; margin: var(--grok-spacing-lg) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; animation: grokFadeInUp 1.1s ease; } .grok_list li { padding: var(--grok-spacing-sm) 0; padding-left: var(--grok-spacing-lg); position: relative; } .grok_list li::before { content: '•'; position: absolute; left: 0; color: var(--grok-blue); font-weight: bold; } .grok_list--ordered { counter-reset: grok-counter; } .grok_list--ordered li { counter-increment: grok-counter; } .grok_list--ordered li::before { content: counter(grok-counter) '.'; } .grok_table-wrapper { overflow-x: auto; margin: var(--grok-spacing-xl) 0; animation: grokFadeInUp 1s ease; } .grok_table { width: 100%; border-collapse: collapse; background: var(--grok-white); border-radius: var(--grok-radius); overflow: hidden; box-shadow: var(--grok-shadow-md); } .grok_table thead { background: var(--grok-primary); } .grok_table thead th { padding: var(--grok-spacing-md); color: var(--grok-white); font-weight: 600; text-align: left; font-size: clamp(0.875rem, 1.5vw, 1rem); } .grok_table tbody tr { border-bottom: 1px solid var(--grok-gray-200); transition: background var(--grok-transition); } .grok_table tbody tr:hover { background: var(--grok-gray-50); } .grok_table tbody tr:last-child { border-bottom: none; } .grok_table tbody td { padding: var(--grok-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--grok-gray-700); } .grok_fundamentals, .grok_pillar { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin: var(--grok-spacing-xl) 0; box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_pillar { border-left: 4px solid var(--grok-blue); margin-bottom: var(--grok-spacing-lg); transition: transform var(--grok-transition); } .grok_pillar:hover { transform: translateX(5px); box-shadow: var(--grok-shadow-md); } .grok_pillar__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_pillar__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--grok-gray-700); margin-bottom: var(--grok-spacing-md); } .grok_signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_signal { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); box-shadow: var(--grok-shadow-sm); transition: transform var(--grok-transition); animation: grokFadeInUp 1s ease; } .grok_signal:hover { transform: translateY(-3px); box-shadow: var(--grok-shadow-md); } .grok_signal--high { border-top: 4px solid #10B981; } .grok_signal--medium { border-top: 4px solid #F59E0B; } .grok_signal--negative { border-top: 4px solid var(--grok-accent); } .grok_signal__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--grok-spacing-md); } .grok_signal__list { list-style: none; padding: 0; line-height: 1.8; } .grok_signal__list li { padding: var(--grok-spacing-xs) 0; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--grok-gray-600); } .grok_strategy { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin-bottom: var(--grok-spacing-lg); box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_strategy__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-lg); } .grok_strategy__content { padding-left: var(--grok-spacing-lg); } .grok_strategy__label { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-gray-700); margin-bottom: var(--grok-spacing-md); } .grok_strategy__impact { margin-top: var(--grok-spacing-lg); padding: var(--grok-spacing-md); background: var(--grok-gray-50); border-radius: var(--grok-radius-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-primary); } .grok_checklist { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_checklist__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-lg); } .grok_checklist__list { list-style: none; padding: 0; line-height: 2; } .grok_checklist__list li { padding: var(--grok-spacing-sm) 0; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--grok-gray-700); } .grok_code { background: var(--grok-gray-100); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; animation: grokFadeInUp 1s ease; } .grok_code__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_code__block { background: var(--grok-dark); color: var(--grok-white); padding: var(--grok-spacing-lg); border-radius: var(--grok-radius-sm); font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; overflow-x: auto; white-space: pre-wrap; } .grok_tactics { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin: var(--grok-spacing-xl) 0; box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_tactics__subtitle { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin: var(--grok-spacing-lg) 0 var(--grok-spacing-md); } .grok_tactics__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--grok-gray-700); margin-bottom: var(--grok-spacing-md); } .grok_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grok-spacing-lg); margin: var(--grok-spacing-xl) 0; } .grok_kpi { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); box-shadow: var(--grok-shadow-sm); transition: transform var(--grok-transition); animation: grokFadeInUp 1s ease; } .grok_kpi:hover { transform: translateY(-3px); box-shadow: var(--grok-shadow-md); } .grok_kpi__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_tools { margin: var(--grok-spacing-xl) 0; } .grok_tool { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-lg); margin-bottom: var(--grok-spacing-lg); box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_tool__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_advanced { display: flex; flex-direction: column; gap: var(--grok-spacing-lg); } .grok_advanced__card { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); box-shadow: var(--grok-shadow-sm); transition: transform var(--grok-transition); animation: grokFadeInUp 1s ease; } .grok_advanced__card:hover { transform: translateY(-5px); box-shadow: var(--grok-shadow-lg); } .grok_advanced__card--network { border-left: 4px solid var(--grok-blue); } .grok_advanced__card--semantic { border-left: 4px solid var(--grok-secondary); } .grok_advanced__card--predictive { border-left: 4px solid var(--grok-accent); } .grok_advanced__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_advanced__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 500; color: var(--grok-gray-600); margin-bottom: var(--grok-spacing-md); } .grok_advanced__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--grok-gray-700); margin-bottom: var(--grok-spacing-md); } .grok_advanced__result { margin-top: var(--grok-spacing-lg); padding: var(--grok-spacing-md); background: var(--grok-gray-50); border-radius: var(--grok-radius-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-primary); } .grok_future { background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin: var(--grok-spacing-xl) 0; box-shadow: var(--grok-shadow-sm); animation: grokFadeInUp 1s ease; } .grok_future__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-xl); text-align: center; } .grok_future__item { padding: var(--grok-spacing-lg) 0; border-bottom: 1px solid var(--grok-gray-200); animation: grokFadeInUp 1s ease; } .grok_future__item:last-child { border-bottom: none; } .grok_future__subtitle { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-md); } .grok_future__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--grok-gray-700); } .grok_preparation { background: var(--grok-gray-50); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin: var(--grok-spacing-xl) 0; animation: grokFadeInUp 1s ease; } .grok_preparation__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-lg); } .grok_preparation__list { list-style: none; padding: 0; line-height: 2; } .grok_preparation__list li { padding: var(--grok-spacing-sm) 0; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--grok-gray-700); } .grok_cta { background: linear-gradient(135deg, var(--grok-primary) 0%, var(--grok-secondary) 100%); padding: var(--grok-spacing-3xl) 0; animation: grokFadeInUp 1s ease; } .grok_cta__content { max-width: 800px; margin: 0 auto; text-align: center; } .grok_cta__title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; color: var(--grok-white); margin-bottom: var(--grok-spacing-lg); } .grok_cta__text { font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255, 255, 255, 0.95); margin-bottom: var(--grok-spacing-xl); line-height: 1.6; } .grok_cta__box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); margin: var(--grok-spacing-xl) auto; } .grok_cta__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--grok-white); margin-bottom: var(--grok-spacing-lg); } .grok_cta__list { list-style: none; padding: 0; text-align: left; max-width: 500px; margin: 0 auto; line-height: 2; } .grok_cta__list li { padding: var(--grok-spacing-sm) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-white); position: relative; padding-left: var(--grok-spacing-lg); } .grok_cta__list li::before { content: counter(grok-cta-counter) '.'; counter-increment: grok-cta-counter; position: absolute; left: 0; font-weight: bold; } .grok_cta__list { counter-reset: grok-cta-counter; } .grok_summary { background: var(--grok-white); padding: var(--grok-spacing-3xl) 0; animation: grokFadeInUp 1s ease; } .grok_summary__content { max-width: 900px; margin: 0 auto; } .grok_summary__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; color: var(--grok-dark); margin-bottom: var(--grok-spacing-xl); text-align: center; } .grok_summary__list { list-style: none; padding: 0; line-height: 2; } .grok_summary__list li { padding: var(--grok-spacing-md) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-gray-700); border-bottom: 1px solid var(--grok-gray-200); } .grok_summary__list li:last-child { border-bottom: none; } .grok_tips { background: var(--grok-gray-50); padding: var(--grok-spacing-3xl) 0; animation: grokFadeInUp 1s ease; } .grok_tips__content { max-width: 900px; margin: 0 auto; background: var(--grok-white); border-radius: var(--grok-radius); padding: var(--grok-spacing-xl); box-shadow: var(--grok-shadow-md); } .grok_tips__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; color: var(--grok-primary); margin-bottom: var(--grok-spacing-xl); text-align: center; } .grok_tips__list { list-style: none; padding: 0; line-height: 2; } .grok_tips__list li { padding: var(--grok-spacing-md) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--grok-gray-700); border-bottom: 1px solid var(--grok-gray-100); } .grok_tips__list li:last-child { border-bottom: none; } @media (max-width: 768px) { .grok_components, .grok_signals, .grok_kpis { grid-template-columns: 1fr; } .grok_table { font-size: 0.875rem; } .grok_table thead th, .grok_table tbody td { padding: var(--grok-spacing-sm); } .grok_strategy__content { padding-left: 0; } .grok_cta__list { padding: 0 var(--grok-spacing-md); } } @media (max-width: 480px) { .grok_hero__lead, .grok_hero__subtitle { font-size: 1rem; } .grok_section__title { font-size: 1.5rem; } .grok_section__subtitle { font-size: 1.25rem; } } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #FFFFFF; --geo-gray-50: #F9FAFB; --geo-gray-100: #F3F4F6; --geo-gray-200: #E5E7EB; --geo-gray-600: #4B5563; --geo-gray-700: #374151; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-radius: 14px; --geo-radius-sm: 8px; --geo-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --geo-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --geo-transition: 300ms ease; } @keyframes dn_geo-fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_geo-hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: clamp(var(--geo-spacing-3xl), 8vw, 120px) 0; color: var(--geo-white); animation: dn_geo-fadeIn 0.8s ease; } .dn_geo-hero__content { max-width: 1000px; margin: 0 auto; text-align: center; } .dn_geo-hero__label { font-size: clamp(12px, 1.5vw, 14px); text-transform: uppercase; letter-spacing: 3px; color: var(--geo-blue); margin-bottom: var(--geo-spacing-lg); font-weight: 600; animation: dn_geo-fadeIn 0.9s ease; } .dn_geo-hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-bottom: var(--geo-spacing-lg); line-height: 1.2; animation: dn_geo-fadeIn 1s ease; } .dn_geo-hero__subtitle { font-size: clamp(18px, 3vw, 24px); margin-bottom: var(--geo-spacing-2xl); opacity: 0.95; animation: dn_geo-fadeIn 1.1s ease; } .dn_geo-hero__intro { max-width: 800px; margin: 0 auto var(--geo-spacing-2xl); text-align: left; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); animation: dn_geo-fadeIn 1.2s ease; } .dn_geo-hero__intro p { font-size: clamp(16px, 2vw, 18px); line-height: 1.8; margin-bottom: var(--geo-spacing-md); } .dn_geo-hero__intro p:last-child { margin-bottom: 0; } .dn_geo-stat-card { background: linear-gradient(135deg, var(--geo-accent) 0%, #C73846 100%); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); max-width: 600px; margin: 0 auto; animation: dn_geo-fadeIn 1.3s ease; } .dn_geo-stat-card__value { font-size: clamp(28px, 4vw, 36px); font-weight: 700; margin-bottom: var(--geo-spacing-sm); } .dn_geo-stat-card__text { font-size: clamp(16px, 2vw, 20px); opacity: 0.95; } .dn_geo-toc-section { background: var(--geo-gray-50); padding: var(--geo-spacing-2xl) 0; animation: dn_geo-fadeIn 1.4s ease; } .dn_geo-main { background: var(--geo-gray-50); padding: var(--geo-spacing-3xl) 0; } .dn_geo-section { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin-bottom: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow); animation: dn_geo-fadeIn 1s ease; } .dn_geo-section__title { font-size: clamp(28px, 3.5vw, 36px); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-weight: 700; padding-bottom: var(--geo-spacing-md); border-bottom: 2px solid var(--geo-gray-200); } .dn_geo-section__text { font-size: clamp(16px, 2vw, 18px); line-height: 1.8; color: var(--geo-gray-700); margin-bottom: var(--geo-spacing-lg); } .dn_geo-complexity-card { background: var(--geo-gray-50); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; border-left: 4px solid var(--geo-blue); } .dn_geo-complexity-card__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-complexity-card__list { list-style: none; padding: 0; line-height: 2; } .dn_geo-complexity-card__list li { padding: var(--geo-spacing-sm) 0; color: var(--geo-gray-700); } .dn_geo-capabilities { display: grid; gap: var(--geo-spacing-lg); } .dn_geo-capability { background: linear-gradient(135deg, var(--geo-gray-50) 0%, var(--geo-white) 100%); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); border-left: 4px solid var(--geo-blue); transition: all var(--geo-transition); } .dn_geo-capability:hover { transform: translateX(5px); box-shadow: var(--geo-shadow); } .dn_geo-capability:nth-child(odd) { border-left-color: var(--geo-primary); } .dn_geo-capability:nth-child(even) { border-left-color: var(--geo-secondary); } .dn_geo-capability__title { font-size: clamp(18px, 2vw, 20px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-capability__desc, .dn_geo-capability__verify { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.7; color: var(--geo-gray-700); margin-bottom: var(--geo-spacing-md); } .dn_geo-capability__verify { margin-bottom: 0; color: var(--geo-gray-600); } .dn_geo-table-wrapper { overflow-x: auto; margin: var(--geo-spacing-xl) 0; } .dn_geo-table { width: 100%; border-collapse: collapse; background: var(--geo-white); border-radius: var(--geo-radius); overflow: hidden; box-shadow: var(--geo-shadow); } .dn_geo-table thead { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); } .dn_geo-table th { padding: var(--geo-spacing-md); text-align: left; color: var(--geo-white); font-weight: 600; font-size: clamp(14px, 1.6vw, 16px); } .dn_geo-table tbody tr { border-bottom: 1px solid var(--geo-gray-200); transition: background var(--geo-transition); } .dn_geo-table tbody tr:hover { background: var(--geo-gray-50); } .dn_geo-table tbody tr:nth-child(even) { background: var(--geo-gray-50); } .dn_geo-table td { padding: var(--geo-spacing-md); font-size: clamp(14px, 1.6vw, 16px); color: var(--geo-gray-700); } .dn_geo-table__weight { text-align: center; color: var(--geo-primary); font-weight: 700; } .dn_geo-warning { background: linear-gradient(135deg, #FFF5F5 0%, #FFE8E8 100%); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin: var(--geo-spacing-xl) 0; border-left: 4px solid var(--geo-accent); } .dn_geo-warning__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--geo-accent); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-warning__list { list-style: none; padding: 0; line-height: 2; } .dn_geo-warning__list li { padding: var(--geo-spacing-sm) 0; color: var(--geo-gray-700); } .dn_geo-questions { background: var(--geo-gray-50); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); } .dn_geo-questions__category { margin-bottom: var(--geo-spacing-xl); } .dn_geo-questions__heading { font-size: clamp(18px, 2vw, 20px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-questions__list { list-style: none; padding: 0; line-height: 2.2; } .dn_geo-questions__list li { padding: var(--geo-spacing-xs) 0; color: var(--geo-gray-700); } .dn_geo-kpi-section { background: linear-gradient(135deg, var(--geo-primary) 0%, var(--geo-secondary) 100%); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); color: var(--geo-white); margin: var(--geo-spacing-xl) 0; } .dn_geo-kpi-section__title { font-size: clamp(24px, 3vw, 28px); text-align: center; margin-bottom: var(--geo-spacing-xl); } .dn_geo-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--geo-spacing-lg); } .dn_geo-kpi { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); transition: all var(--geo-transition); } .dn_geo-kpi:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .dn_geo-kpi__title { font-size: clamp(16px, 2vw, 18px); margin-bottom: var(--geo-spacing-sm); font-weight: 600; } .dn_geo-kpi__desc { font-size: clamp(14px, 1.6vw, 16px); opacity: 0.95; line-height: 1.6; } .dn_geo-timeline { background: var(--geo-gray-50); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin-top: var(--geo-spacing-xl); } .dn_geo-timeline__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-timeline__list { list-style: none; padding: 0; line-height: 2; } .dn_geo-timeline__list li { padding: var(--geo-spacing-md) 0; border-bottom: 1px solid var(--geo-gray-200); color: var(--geo-gray-700); } .dn_geo-timeline__list li:last-child { border-bottom: none; } .dn_geo-checklist { background: linear-gradient(135deg, #F0F7FF 0%, #E6F3FF 100%); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin: var(--geo-spacing-xl) 0; border: 2px solid var(--geo-blue); } .dn_geo-checklist__title { font-size: clamp(24px, 3vw, 28px); color: var(--geo-dark); text-align: center; margin-bottom: var(--geo-spacing-xl); font-weight: 700; } .dn_geo-checklist__phase { margin-bottom: var(--geo-spacing-xl); } .dn_geo-checklist__phase-title { font-size: clamp(18px, 2vw, 20px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-checklist__list { list-style: none; padding: 0; line-height: 2; } .dn_geo-checklist__list li { padding: var(--geo-spacing-sm) 0; color: var(--geo-gray-700); } .dn_geo-best-practices { background: var(--geo-gray-50); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); margin-top: var(--geo-spacing-xl); border-left: 4px solid var(--geo-blue); } .dn_geo-best-practices__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-best-practices__list { padding-left: var(--geo-spacing-lg); line-height: 2; } .dn_geo-best-practices__list li { padding: var(--geo-spacing-sm) 0; color: var(--geo-gray-700); } .dn_geo-industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--geo-spacing-lg); } .dn_geo-industry { background: var(--geo-gray-50); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: all var(--geo-transition); } .dn_geo-industry:hover { transform: translateY(-3px); box-shadow: var(--geo-shadow); } .dn_geo-industry__title { font-size: clamp(16px, 2vw, 18px); color: var(--geo-primary); margin-bottom: var(--geo-spacing-sm); font-weight: 600; } .dn_geo-industry__text { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; color: var(--geo-gray-600); } .dn_geo-cta { background: linear-gradient(135deg, var(--geo-primary) 0%, var(--geo-secondary) 100%); padding: clamp(var(--geo-spacing-3xl), 8vw, 100px) 0; text-align: center; color: var(--geo-white); animation: dn_geo-fadeIn 1.5s ease; } .dn_geo-cta__content { max-width: 800px; margin: 0 auto; } .dn_geo-cta__title { font-size: clamp(32px, 4vw, 42px); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .dn_geo-cta__subtitle { font-size: clamp(18px, 2.5vw, 22px); margin-bottom: var(--geo-spacing-2xl); opacity: 0.95; line-height: 1.6; } .dn_geo-cta__buttons { display: flex; gap: var(--geo-spacing-md); justify-content: center; flex-wrap: wrap; } .dn_geo-takeaways { background: var(--geo-white); padding: var(--geo-spacing-3xl) 0; animation: dn_geo-fadeIn 1.6s ease; } .dn_geo-takeaways__card { background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%); border: 2px solid #FFC107; border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); } .dn_geo-takeaways__title { font-size: clamp(24px, 3vw, 28px); color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .dn_geo-takeaways__list { list-style: none; padding: 0; line-height: 2.2; } .dn_geo-takeaways__list li { padding: var(--geo-spacing-sm) 0; color: var(--geo-gray-700); } .dn_geo-resources { background: var(--geo-gray-50); padding: var(--geo-spacing-3xl) 0; animation: dn_geo-fadeIn 1.7s ease; } .dn_geo-resources__card { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-xl); box-shadow: var(--geo-shadow); } .dn_geo-resources__title { font-size: clamp(24px, 3vw, 28px); color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .dn_geo-resources__list { list-style: none; padding: 0; line-height: 2; } .dn_geo-resources__list li { padding: var(--geo-spacing-sm) 0; } .dn_geo-resources__list a { color: var(--geo-blue); text-decoration: none; transition: color var(--geo-transition); font-weight: 500; } .dn_geo-resources__list a:hover { color: var(--geo-primary); text-decoration: underline; } .dn_geo-resources__list a:focus-visible { outline: 2px solid var(--geo-blue); outline-offset: 2px; border-radius: var(--geo-radius-sm); } .dn_geo-footer { background: var(--geo-dark); padding: var(--geo-spacing-2xl) 0; color: var(--geo-white); text-align: center; animation: dn_geo-fadeIn 1.8s ease; } .dn_geo-footer__content { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.8; opacity: 0.9; } @media (max-width: 768px) { .dn_geo-table { font-size: 14px; } .dn_geo-table th, .dn_geo-table td { padding: var(--geo-spacing-sm); } .dn_geo-kpi-grid, .dn_geo-industries { grid-template-columns: 1fr; } .dn_geo-cta__buttons { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #FFFFFF; --geo-gray-50: #F8F9FA; --geo-gray-100: #E9ECEF; --geo-gray-200: #DEE2E6; --geo-gray-600: #6C757D; --geo-gray-700: #495057; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-radius: 14px; --geo-shadow-sm: 0 2px 4px rgba(0,0,0,0.08); --geo-shadow-md: 0 4px 12px rgba(0,0,0,0.12); --geo-shadow-lg: 0 8px 24px rgba(0,0,0,0.16); --geo-transition: 300ms ease; } @keyframes geoFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .geo-hero, .geo-stats, .geo-toc-section, .geo-tactic, .geo-implementation, .geo-conclusion, .geo-cta, .geo-meta { animation: none; } } .geo-article { background: var(--geo-white); min-height: 100vh; } .geo-hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); color: var(--geo-white); padding: clamp(var(--geo-spacing-3xl), 8vw, 120px) var(--geo-spacing-lg); text-align: center; animation: geoFadeInUp 0.6s ease; } .geo-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: var(--geo-spacing-xl); } .geo-hero__lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.7; max-width: 900px; margin: 0 auto var(--geo-spacing-lg); opacity: 0.95; } .geo-hero__subtitle { font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.7; max-width: 900px; margin: 0 auto; opacity: 0.9; } .geo-stats { background: var(--geo-accent); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); animation: geoFadeInUp 0.7s ease; animation-delay: 0.1s; animation-fill-mode: both; } .geo-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--geo-spacing-xl); } .geo-stats__item { text-align: center; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: transform var(--geo-transition); } .geo-stats__item:hover { transform: translateY(-5px); } .geo-stats__number { display: block; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; color: var(--geo-white); margin-bottom: var(--geo-spacing-sm); } .geo-stats__label { font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--geo-white); text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; } .geo-toc-section { background: var(--geo-gray-50); padding: var(--geo-spacing-2xl) var(--geo-spacing-lg); animation: geoFadeInUp 0.8s ease; animation-delay: 0.2s; animation-fill-mode: both; } .geo-content { background: var(--geo-white); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); } .geo-tactic { margin-bottom: var(--geo-spacing-3xl); padding-bottom: var(--geo-spacing-3xl); border-bottom: 2px solid var(--geo-gray-100); animation: geoFadeInUp 0.9s ease; animation-fill-mode: both; } .geo-tactic:last-of-type { border-bottom: none; } .geo-tactic__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .geo-tactic__intro { font-size: clamp(1.125rem, 1.8vw, 1.25rem); color: var(--geo-gray-700); line-height: 1.7; margin-bottom: var(--geo-spacing-2xl); font-weight: 500; } .geo-subsection { margin-bottom: var(--geo-spacing-2xl); } .geo-subsection__title { font-size: clamp(1.375rem, 2vw, 1.75rem); color: var(--geo-primary); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .geo-subsection__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--geo-dark); margin-top: var(--geo-spacing-xl); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .geo-code { background: var(--geo-gray-50); border: 1px solid var(--geo-gray-200); border-radius: var(--geo-radius); padding: var(--geo-spacing-lg); margin: var(--geo-spacing-lg) 0; overflow-x: auto; font-family: 'Courier New', monospace; } .geo-code code { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6; color: var(--geo-dark); white-space: pre; } .geo-list { padding-left: var(--geo-spacing-lg); line-height: 1.8; margin-bottom: var(--geo-spacing-lg); color: var(--geo-gray-700); } .geo-list li { margin-bottom: var(--geo-spacing-sm); font-size: clamp(1rem, 1.4vw, 1.125rem); } .geo-list li strong { color: var(--geo-dark); } .geo-list--ordered { list-style-type: decimal; } .geo-table-wrapper { overflow-x: auto; margin: var(--geo-spacing-xl) 0; } .geo-table { width: 100%; min-width: 600px; border-collapse: collapse; background: var(--geo-white); box-shadow: var(--geo-shadow-md); border-radius: var(--geo-radius); overflow: hidden; } .geo-table thead { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); } .geo-table th { padding: var(--geo-spacing-md) var(--geo-spacing-lg); text-align: left; color: var(--geo-white); font-weight: 600; font-size: clamp(0.875rem, 1.2vw, 1rem); } .geo-table tbody tr { border-bottom: 1px solid var(--geo-gray-100); transition: background var(--geo-transition); } .geo-table tbody tr:hover { background: var(--geo-gray-50); } .geo-table tbody tr:last-child { border-bottom: none; } .geo-table td { padding: var(--geo-spacing-md) var(--geo-spacing-lg); font-size: clamp(0.875rem, 1.2vw, 1rem); color: var(--geo-gray-700); } .geo-table__highlight { color: var(--geo-blue); font-weight: 700; } .geo-implementation { margin-bottom: var(--geo-spacing-3xl); animation: geoFadeInUp 1s ease; animation-fill-mode: both; } .geo-implementation__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .geo-implementation__intro { font-size: clamp(1.125rem, 1.8vw, 1.25rem); color: var(--geo-gray-700); line-height: 1.7; margin-bottom: var(--geo-spacing-2xl); } .geo-timeline { display: grid; gap: var(--geo-spacing-xl); margin-bottom: var(--geo-spacing-2xl); } .geo-timeline__phase { background: var(--geo-gray-50); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); border-left: 4px solid var(--geo-primary); transition: transform var(--geo-transition), box-shadow var(--geo-transition); } .geo-timeline__phase:hover { transform: translateX(5px); box-shadow: var(--geo-shadow-md); } .geo-timeline__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .geo-timeline__subtitle { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .geo-metrics { margin-bottom: var(--geo-spacing-2xl); } .geo-metrics__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .geo-metrics__subtitle { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--geo-primary); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .geo-outcomes { background: var(--geo-gray-50); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); } .geo-outcomes__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .geo-conclusion { animation: geoFadeInUp 1.1s ease; animation-fill-mode: both; } .geo-conclusion__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); font-weight: 700; } .geo-conclusion__text { font-size: clamp(1.125rem, 1.8vw, 1.25rem); line-height: 1.8; color: var(--geo-gray-700); margin-bottom: var(--geo-spacing-lg); } .geo-cta { background: linear-gradient(135deg, var(--geo-primary) 0%, var(--geo-secondary) 100%); color: var(--geo-white); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); text-align: center; animation: geoFadeInUp 1.2s ease; animation-fill-mode: both; } .geo-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .geo-cta__text { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; max-width: 800px; margin: 0 auto var(--geo-spacing-lg); opacity: 0.95; } .geo-cta__highlight { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 600; max-width: 800px; margin: 0 auto; color: var(--geo-white); } .geo-meta { background: var(--geo-gray-50); padding: var(--geo-spacing-2xl) var(--geo-spacing-lg); animation: geoFadeInUp 1.3s ease; animation-fill-mode: both; } .geo-meta p { color: var(--geo-gray-600); margin-bottom: var(--geo-spacing-sm); font-size: clamp(0.875rem, 1.2vw, 1rem); } .geo-meta p strong { color: var(--geo-dark); } @media (max-width: 768px) { .geo-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--geo-spacing-md); } .geo-table { font-size: 0.875rem; } .geo-table th, .geo-table td { padding: var(--geo-spacing-sm) var(--geo-spacing-md); } .geo-list { padding-left: var(--geo-spacing-md); } } @media (max-width: 480px) { .geo-stats__grid { grid-template-columns: 1fr; } .geo-hero { padding: var(--geo-spacing-2xl) var(--geo-spacing-md); } .geo-content { padding: var(--geo-spacing-2xl) var(--geo-spacing-md); } .geo-code { padding: var(--geo-spacing-md); font-size: 0.75rem; } } a:focus-visible, button:focus-visible { outline: 3px solid var(--geo-blue); outline-offset: 2px; border-radius: var(--geo-radius); } button:hover { cursor: pointer; } ul, ol { list-style-position: outside; } :root { --dn-pi-primary: #194A9A; --dn-pi-secondary: #2F62AD; --dn-pi-blue: #348EDF; --dn-pi-accent: #DF4756; --dn-pi-dark: #011F4E; --dn-pi-black: #000000; --dn-pi-white: #FFFFFF; --dn-pi-gray-50: #F8F9FA; --dn-pi-gray-100: #F1F3F6; --dn-pi-gray-200: #E2E7EE; --dn-pi-gray-300: #CDD5E0; --dn-pi-gray-600: #6B7280; --dn-pi-gray-700: #4B5563; --dn-pi-gray-800: #1F2937; --dn-pi-spacing-xs: 4px; --dn-pi-spacing-sm: 8px; --dn-pi-spacing-md: 16px; --dn-pi-spacing-lg: 24px; --dn-pi-spacing-xl: 32px; --dn-pi-spacing-2xl: 48px; --dn-pi-spacing-3xl: 64px; --dn-pi-spacing-4xl: 96px; --dn-pi-radius: 14px; --dn-pi-radius-sm: 8px; --dn-pi-radius-lg: 20px; --dn-pi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-pi-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-pi-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-pi-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-pi-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-pi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dn-pi-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .dn_pi-page { min-height: 100vh; background: var(--dn-pi-white); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-pi-black); } .dn_pi-hero { background: linear-gradient(135deg, var(--dn-pi-dark) 0%, var(--dn-pi-primary) 100%); padding: clamp(var(--dn-pi-spacing-3xl), 8vw, var(--dn-pi-spacing-4xl)) 0; position: relative; overflow: hidden; animation: dn-pi-fadeInUp 0.8s ease; } .dn_pi-hero__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-pi-spacing-lg); text-align: center; } .dn_pi-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-pi-white); margin-bottom: var(--dn-pi-spacing-lg); line-height: 1.2; } .dn_pi-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-pi-white); opacity: 0.95; margin-bottom: var(--dn-pi-spacing-2xl); line-height: 1.5; } .dn_pi-hero__description { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-spacing-xl); max-width: 900px; margin: 0 auto; } .dn_pi-hero__description p { color: var(--dn-pi-white); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-hero__description p:last-child { margin-bottom: 0; } .dn_pi-toc-section { background: var(--dn-pi-gray-50); padding: var(--dn-pi-spacing-3xl) 0; animation: dn-pi-fadeInUp 0.9s ease 0.1s both; } .dn_pi-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-pi-spacing-lg); } .dn_pi-content { background: var(--dn-pi-white); padding: var(--dn-pi-spacing-3xl) 0; } .dn_pi-section { margin-bottom: var(--dn-pi-spacing-4xl); animation: dn-pi-fadeInUp 0.8s ease; } .dn_pi-section__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-xl); padding-bottom: var(--dn-pi-spacing-md); border-bottom: 3px solid var(--dn-pi-primary); } .dn_pi-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-lg); } .dn_pi-subsection { margin: var(--dn-pi-spacing-2xl) 0; } .dn_pi-section__subtitle { font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-lg); } .dn_pi-feature { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); margin-bottom: var(--dn-pi-spacing-lg); transition: var(--dn-pi-transition); } .dn_pi-feature:hover { box-shadow: var(--dn-pi-shadow-md); transform: translateY(-2px); } .dn_pi-feature:focus-visible { outline: 2px solid var(--dn-pi-blue); outline-offset: 2px; } .dn_pi-feature__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-feature__text { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.7; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-list { list-style: none; padding: 0; margin: 0; } .dn_pi-list li { padding: var(--dn-pi-spacing-sm) 0; padding-left: var(--dn-pi-spacing-xl); position: relative; line-height: 1.6; color: var(--dn-pi-gray-700); } .dn_pi-list li::before { content: "•"; position: absolute; left: 0; color: var(--dn-pi-blue); font-weight: 700; } .dn_pi-list--ordered { counter-reset: list-counter; } .dn_pi-list--ordered li { counter-increment: list-counter; } .dn_pi-list--ordered li::before { content: counter(list-counter) "."; color: var(--dn-pi-primary); font-weight: 600; } .dn_pi-phase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-spacing-lg); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-phase { background: linear-gradient(135deg, var(--dn-pi-gray-50) 0%, var(--dn-pi-white) 100%); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); border-left: 4px solid var(--dn-pi-primary); transition: var(--dn-pi-transition); } .dn_pi-phase:nth-child(2) { border-left-color: var(--dn-pi-blue); } .dn_pi-phase:nth-child(3) { border-left-color: var(--dn-pi-secondary); } .dn_pi-phase:hover { transform: translateX(4px); box-shadow: var(--dn-pi-shadow-lg); } .dn_pi-phase:focus-visible { outline: 2px solid var(--dn-pi-blue); outline-offset: 2px; } .dn_pi-phase__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-phase__text { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.7; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-spacing-xl); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-factor { background: var(--dn-pi-white); border: 2px solid var(--dn-pi-gray-200); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); transition: var(--dn-pi-transition); } .dn_pi-factor:hover { border-color: var(--dn-pi-primary); box-shadow: var(--dn-pi-shadow-md); } .dn_pi-factor:focus-visible { outline: 2px solid var(--dn-pi-blue); outline-offset: 2px; } .dn_pi-factor__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-authority-grid, .dn_pi-eat-grid, .dn_pi-primary-grid, .dn_pi-density-grid, .dn_pi-scan-grid, .dn_pi-tech-grid, .dn_pi-trust-grid, .dn_pi-topical-grid, .dn_pi-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-spacing-xl); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-authority-card, .dn_pi-eat-card, .dn_pi-primary-card, .dn_pi-density-card, .dn_pi-scan-card, .dn_pi-tech-card, .dn_pi-trust-card, .dn_pi-topical-card, .dn_pi-kpi-card { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); transition: var(--dn-pi-transition); } .dn_pi-authority-card:hover, .dn_pi-eat-card:hover, .dn_pi-primary-card:hover, .dn_pi-density-card:hover, .dn_pi-scan-card:hover, .dn_pi-tech-card:hover, .dn_pi-trust-card:hover, .dn_pi-topical-card:hover, .dn_pi-kpi-card:hover { box-shadow: var(--dn-pi-shadow-lg); transform: translateY(-4px); } .dn_pi-authority-card__title, .dn_pi-eat-card__title, .dn_pi-primary-card__title, .dn_pi-density-card__title, .dn_pi-scan-card__title, .dn_pi-tech-card__title, .dn_pi-trust-card__title, .dn_pi-topical-card__title, .dn_pi-kpi-card__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-eat-card__text, .dn_pi-primary-card__text, .dn_pi-density-card__text, .dn_pi-topical-card__text { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.7; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-code { background: var(--dn-pi-gray-800); color: var(--dn-pi-white); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); margin: var(--dn-pi-spacing-lg) 0; overflow-x: auto; } .dn_pi-code pre { margin: 0; font-family: 'Courier New', monospace; font-size: clamp(0.75rem, 1vw, 0.875rem); line-height: 1.5; white-space: pre; } .dn_pi-code code { font-family: inherit; } .dn_pi-structure { margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-structure__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-structure__text { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.7; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-performance { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-spacing-xl); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-performance__metrics, .dn_pi-performance__techniques { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); } .dn_pi-performance__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-schema { margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-schema__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-newsjack, .dn_pi-freshness, .dn_pi-competitive, .dn_pi-displacement, .dn_pi-monitoring, .dn_pi-multiformat, .dn_pi-academic { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-pi-spacing-xl); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-newsjack__framework, .dn_pi-newsjack__trending, .dn_pi-freshness__triggers, .dn_pi-freshness__signals, .dn_pi-competitive__landscape, .dn_pi-competitive__differentiation, .dn_pi-displacement__skyscraper, .dn_pi-displacement__gap, .dn_pi-monitoring__testing, .dn_pi-monitoring__competitive, .dn_pi-multiformat__formats, .dn_pi-multiformat__syndication, .dn_pi-academic__content, .dn_pi-academic__methodology { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); } .dn_pi-newsjack__title, .dn_pi-freshness__title, .dn_pi-competitive__title, .dn_pi-displacement__title, .dn_pi-monitoring__title, .dn_pi-multiformat__title, .dn_pi-academic__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-api { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-xl); margin: var(--dn-pi-spacing-xl) 0; } .dn_pi-api__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-pi-primary); margin-bottom: var(--dn-pi-spacing-md); } .dn_pi-conclusion { background: linear-gradient(135deg, var(--dn-pi-gray-50) 0%, var(--dn-pi-white) 100%); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-spacing-3xl); margin: var(--dn-pi-spacing-3xl) 0; animation: dn-pi-fadeInUp 0.8s ease; } .dn_pi-conclusion__title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-pi-dark); margin-bottom: var(--dn-pi-spacing-xl); text-align: center; } .dn_pi-conclusion__content { max-width: 900px; margin: 0 auto; } .dn_pi-conclusion__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-pi-gray-700); margin-bottom: var(--dn-pi-spacing-lg); } .dn_pi-cta-section { margin: var(--dn-pi-spacing-3xl) 0; animation: dn-pi-fadeInUp 0.8s ease; } .dn_pi-cta { background: linear-gradient(135deg, var(--dn-pi-primary) 0%, var(--dn-pi-secondary) 100%); border-radius: var(--dn-pi-radius-lg); padding: var(--dn-pi-spacing-3xl); text-align: center; color: var(--dn-pi-white); box-shadow: var(--dn-pi-shadow-xl); } .dn_pi-cta__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: var(--dn-pi-spacing-lg); } .dn_pi-cta__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; margin-bottom: var(--dn-pi-spacing-lg); } .dn_pi-cta__action { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; } .dn_pi-meta { background: var(--dn-pi-gray-50); border-radius: var(--dn-pi-radius); padding: var(--dn-pi-spacing-lg); margin-top: var(--dn-pi-spacing-3xl); text-align: center; } .dn_pi-meta__item { color: var(--dn-pi-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); margin: var(--dn-pi-spacing-sm) 0; } @media (max-width: 768px) { .dn_pi-phase-grid, .dn_pi-factors, .dn_pi-authority-grid, .dn_pi-eat-grid, .dn_pi-primary-grid, .dn_pi-density-grid, .dn_pi-scan-grid, .dn_pi-tech-grid, .dn_pi-performance, .dn_pi-trust-grid, .dn_pi-topical-grid, .dn_pi-newsjack, .dn_pi-freshness, .dn_pi-competitive, .dn_pi-displacement, .dn_pi-kpi-grid, .dn_pi-monitoring, .dn_pi-multiformat, .dn_pi-academic { grid-template-columns: 1fr; gap: var(--dn-pi-spacing-lg); } .dn_pi-container { padding: 0 var(--dn-pi-spacing-md); } .dn_pi-hero__container { padding: 0 var(--dn-pi-spacing-md); } .dn_pi-hero__description { padding: var(--dn-pi-spacing-lg); } .dn_pi-section { margin-bottom: var(--dn-pi-spacing-2xl); } .dn_pi-code { padding: var(--dn-pi-spacing-md); } .dn_pi-code pre { font-size: 0.75rem; } } @media (max-width: 480px) { .dn_pi-feature, .dn_pi-phase, .dn_pi-authority-card, .dn_pi-eat-card, .dn_pi-primary-card, .dn_pi-factor, .dn_pi-conclusion, .dn_pi-cta { padding: var(--dn-pi-spacing-lg); } .dn_pi-list li { padding-left: var(--dn-pi-spacing-lg); } } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #FFFFFF; --geo-gray-50: #F9FAFB; --geo-gray-100: #F3F4F6; --geo-gray-200: #E5E7EB; --geo-gray-600: #4B5563; --geo-gray-700: #374151; --geo-gray-800: #1F2937; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-spacing-4xl: 96px; --geo-radius: 14px; --geo-radius-sm: 8px; --geo-radius-lg: 20px; --geo-shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --geo-shadow: 0 4px 6px rgba(0,0,0,0.08); --geo-shadow-lg: 0 10px 25px rgba(0,0,0,0.12); --geo-transition: 300ms ease; } @keyframes geoFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .geo-article { background: var(--geo-white); min-height: 100vh; } .geo-hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-4xl) var(--geo-spacing-lg); color: var(--geo-white); animation: geoFadeUp 0.8s ease; } .geo-hero__container { max-width: 1200px; margin: 0 auto; } .geo-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; margin-bottom: var(--geo-spacing-lg); font-weight: 700; } .geo-meta { display: flex; flex-wrap: wrap; gap: var(--geo-spacing-lg); opacity: 0.9; font-size: clamp(0.875rem, 1.5vw, 1rem); } .geo-meta__item { display: flex; gap: var(--geo-spacing-sm); } .geo-main { background: var(--geo-gray-50); padding: var(--geo-spacing-3xl) 0; } .geo-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--geo-spacing-lg); } .geo-content-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--geo-spacing-3xl); } .geo-section { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow); animation: geoFadeUp 0.8s ease; animation-fill-mode: both; } .geo-section:nth-child(1) { animation-delay: 0.1s; } .geo-section:nth-child(2) { animation-delay: 0.2s; } .geo-section:nth-child(3) { animation-delay: 0.3s; } .geo-section:nth-child(4) { animation-delay: 0.4s; } .geo-section:nth-child(5) { animation-delay: 0.5s; } .geo-section h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); padding-bottom: var(--geo-spacing-md); border-bottom: 2px solid var(--geo-gray-200); font-weight: 700; } .geo-section h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--geo-primary); margin: var(--geo-spacing-2xl) 0 var(--geo-spacing-lg); font-weight: 600; } .geo-section h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--geo-dark); margin: var(--geo-spacing-xl) 0 var(--geo-spacing-md); font-weight: 600; } .geo-section p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--geo-gray-700); margin-bottom: var(--geo-spacing-lg); } .geo-section ul, .geo-section ol { margin-bottom: var(--geo-spacing-lg); padding-left: var(--geo-spacing-xl); line-height: 1.8; color: var(--geo-gray-700); } .geo-section li { margin-bottom: var(--geo-spacing-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); } .geo-code-block { background: var(--geo-gray-800); color: var(--geo-gray-200); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); overflow-x: auto; margin: var(--geo-spacing-xl) 0; font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6; } .geo-cta { background: linear-gradient(135deg, var(--geo-accent) 0%, #C73846 100%); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); border-radius: var(--geo-radius); text-align: center; color: var(--geo-white); margin-top: var(--geo-spacing-2xl); animation: geoFadeUp 1.2s ease; } .geo-cta h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--geo-spacing-lg); color: var(--geo-white); } .geo-cta p { font-size: clamp(1.125rem, 1.8vw, 1.25rem); margin-bottom: var(--geo-spacing-xl); color: var(--geo-white); max-width: 800px; margin-left: auto; margin-right: auto; } .geo-cta__link { color: var(--geo-white); font-weight: 700; text-decoration: underline; transition: opacity var(--geo-transition); } .geo-cta__link:hover { opacity: 0.8; } .geo-cta__link:focus-visible { outline: 3px solid var(--geo-white); outline-offset: 2px; border-radius: var(--geo-radius-sm); } .geo-footer { background: var(--geo-dark); color: var(--geo-white); padding: var(--geo-spacing-2xl) var(--geo-spacing-lg); text-align: center; margin-top: var(--geo-spacing-3xl); } .geo-footer p { font-size: clamp(0.875rem, 1.2vw, 1rem); opacity: 0.8; margin: 0; color: var(--geo-white); } @media (max-width: 768px) { .geo-hero { padding: var(--geo-spacing-2xl) var(--geo-spacing-md); } .geo-section { padding: var(--geo-spacing-lg); } .geo-main { padding: var(--geo-spacing-2xl) 0; } .geo-code-block { padding: var(--geo-spacing-md); font-size: 0.875rem; } .geo-section ul, .geo-section ol { padding-left: var(--geo-spacing-lg); } } @media (max-width: 480px) { .geo-hero__title { font-size: 1.75rem; } .geo-section h2 { font-size: 1.5rem; } .geo-section h3 { font-size: 1.25rem; } .geo-section h4 { font-size: 1.125rem; } } :root { --claude-primary: #194A9A; --claude-secondary: #2F62AD; --claude-blue: #348EDF; --claude-accent: #DF4756; --claude-dark: #011F4E; --claude-black: #000000; --claude-white: #FFFFFF; --claude-gray-50: #F9FAFB; --claude-gray-100: #F3F4F6; --claude-gray-200: #E5E7EB; --claude-gray-300: #D1D5DB; --claude-gray-600: #4B5563; --claude-gray-700: #374151; --claude-gray-800: #1F2937; --claude-spacing-xs: 4px; --claude-spacing-sm: 8px; --claude-spacing-md: 16px; --claude-spacing-lg: 24px; --claude-spacing-xl: 32px; --claude-spacing-2xl: 48px; --claude-spacing-3xl: 64px; --claude-spacing-4xl: 96px; --claude-radius: 14px; --claude-radius-sm: 8px; --claude-radius-lg: 20px; --claude-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --claude-shadow: 0 4px 12px rgba(0,0,0,0.15); --claude-shadow-lg: 0 10px 24px rgba(0,0,0,0.2); --claude-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes claudeFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .claude-hero { background: linear-gradient(135deg, var(--claude-dark) 0%, var(--claude-primary) 100%); padding: var(--claude-spacing-4xl) var(--claude-spacing-lg); position: relative; overflow: hidden; } .claude-hero::before { content: ''; position: absolute; top: -50%; right: -30%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 60%); pointer-events: none; } .claude-hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; text-align: center; animation: claudeFadeInUp 0.8s ease; } .claude-hero__title { color: var(--claude-white); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: var(--claude-spacing-lg); } .claude-hero__subtitle { color: var(--claude-blue); font-size: clamp(1.125rem, 2.5vw, 1.5rem); max-width: 800px; margin: 0 auto var(--claude-spacing-2xl); line-height: 1.6; } .claude-article { background: var(--claude-gray-50); padding: var(--claude-spacing-3xl) 0; } .claude-article__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--claude-spacing-lg); } .claude-content { display: grid; grid-template-columns: 1fr; gap: var(--claude-spacing-2xl); } .claude-section { background: var(--claude-white); border-radius: var(--claude-radius); padding: var(--claude-spacing-2xl); box-shadow: var(--claude-shadow); animation: claudeFadeInUp 0.8s ease; animation-fill-mode: both; } .claude-section:nth-child(2) { animation-delay: 0.1s; } .claude-section:nth-child(3) { animation-delay: 0.2s; } .claude-section:nth-child(4) { animation-delay: 0.3s; } .claude-section:nth-child(5) { animation-delay: 0.4s; } .claude-section__title { color: var(--claude-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--claude-spacing-xl); padding-bottom: var(--claude-spacing-md); border-bottom: 3px solid var(--claude-blue); } .claude-section__subtitle { color: var(--claude-primary); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; margin: var(--claude-spacing-xl) 0 var(--claude-spacing-lg); } .claude-section__subsection { color: var(--claude-secondary); font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 600; margin: var(--claude-spacing-lg) 0 var(--claude-spacing-md); } .claude-section__minor-heading { color: var(--claude-dark); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; margin: var(--claude-spacing-lg) 0 var(--claude-spacing-md); } .claude-section__text { color: var(--claude-gray-700); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.8; margin-bottom: var(--claude-spacing-lg); } .claude-list { list-style: none; padding: 0; margin: var(--claude-spacing-lg) 0; } .claude-list__item { position: relative; padding-left: var(--claude-spacing-xl); margin-bottom: var(--claude-spacing-md); color: var(--claude-gray-700); line-height: 1.8; } .claude-list__item::before { content: '•'; position: absolute; left: 0; color: var(--claude-blue); font-weight: 700; font-size: 1.25rem; } .claude-list--numbered { counter-reset: list-counter; } .claude-list--numbered .claude-list__item { counter-increment: list-counter; } .claude-list--numbered .claude-list__item::before { content: counter(list-counter) '.'; font-size: 1rem; } .claude-code-block { background: var(--claude-gray-800); color: var(--claude-gray-100); padding: var(--claude-spacing-lg); border-radius: var(--claude-radius); overflow-x: auto; margin: var(--claude-spacing-lg) 0; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; line-height: 1.6; } .claude-callout { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); border-left: 4px solid var(--claude-blue); border-radius: var(--claude-radius); padding: var(--claude-spacing-lg); margin: var(--claude-spacing-xl) 0; } .claude-callout__text { color: var(--claude-dark); font-size: 1.125rem; line-height: 1.8; margin: 0; } .claude-meta { background: var(--claude-gray-100); border-radius: var(--claude-radius); padding: var(--claude-spacing-xl); margin-top: var(--claude-spacing-3xl); text-align: center; } .claude-meta__title { color: var(--claude-primary); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: var(--claude-spacing-lg); } .claude-meta__text { color: var(--claude-gray-700); font-size: 1.125rem; line-height: 1.8; margin-bottom: var(--claude-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .claude-meta__contact { color: var(--claude-primary); font-size: 1.25rem; font-weight: 700; } .claude-meta__info { display: flex; justify-content: center; gap: var(--claude-spacing-xl); margin-top: var(--claude-spacing-2xl); padding-top: var(--claude-spacing-xl); border-top: 1px solid var(--claude-gray-300); flex-wrap: wrap; } .claude-meta__item { color: var(--claude-gray-600); font-size: 0.9rem; } .claude-btn { display: inline-block; padding: var(--claude-spacing-md) var(--claude-spacing-xl); border-radius: var(--claude-radius); font-weight: 600; text-decoration: none; transition: var(--claude-transition); cursor: pointer; border: none; } .claude-btn--primary { background: var(--claude-primary); color: var(--claude-white); } .claude-btn--primary:hover { background: var(--claude-secondary); transform: translateY(-2px); box-shadow: var(--claude-shadow); } .claude-btn--primary:focus-visible { outline: 3px solid var(--claude-blue); outline-offset: 2px; } @media (max-width: 768px) { .claude-hero { padding: var(--claude-spacing-3xl) var(--claude-spacing-md); } .claude-section { padding: var(--claude-spacing-xl); } .claude-meta__info { flex-direction: column; gap: var(--claude-spacing-md); } } @media (prefers-reduced-motion: reduce) { .claude-section, .claude-hero__container { animation: none; } .claude-btn--primary:hover { transform: none; } } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #FFFFFF; --geo-gray-50: #F9FAFB; --geo-gray-100: #F3F4F6; --geo-gray-200: #E5E7EB; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-radius: 14px; --geo-shadow: 0 4px 12px rgba(0,0,0,0.08); --geo-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes geo-fadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .geo-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--geo-black); } .geo-hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); text-align: center; color: var(--geo-white); } .geo-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: var(--geo-spacing-lg); animation: geo-fadeIn 0.8s ease; } .geo-hero__subtitle { font-size: clamp(1.25rem, 3vw, 1.75rem); opacity: 0.95; max-width: 800px; margin: 0 auto var(--geo-spacing-xl); animation: geo-fadeIn 0.9s ease; } .geo-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--geo-spacing-lg); } .geo-container--narrow { max-width: 900px; } .geo-section { animation: geo-fadeIn 1s ease; } .geo-section--gray { background: var(--geo-gray-50); } .geo-section__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--geo-dark); text-align: center; margin-bottom: var(--geo-spacing-2xl); } .geo-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--geo-spacing-lg); margin: var(--geo-spacing-2xl) 0; } .geo-stat-card { background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); text-align: center; box-shadow: var(--geo-shadow); transition: transform var(--geo-transition); } .geo-stat-card:hover { transform: translateY(-4px); } .geo-stat__value { font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; color: var(--geo-primary); } .geo-stat__label { color: var(--geo-dark); margin-top: var(--geo-spacing-sm); } .geo-table-wrapper { overflow-x: auto; margin: var(--geo-spacing-2xl) 0; } .geo-table { width: 100%; border-collapse: collapse; background: var(--geo-white); border-radius: var(--geo-radius); overflow: hidden; box-shadow: var(--geo-shadow); } .geo-table thead { background: var(--geo-primary); color: var(--geo-white); } .geo-table th, .geo-table td { padding: var(--geo-spacing-md); text-align: left; } .geo-table tbody tr { border-bottom: 1px solid var(--geo-gray-200); } .geo-table tbody tr:hover { background: var(--geo-gray-50); } .geo-card { background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); box-shadow: var(--geo-shadow); height: 100%; transition: transform var(--geo-transition); } .geo-card:hover { transform: translateY(-4px); } .geo-card__title { font-size: 1.25rem; font-weight: 700; color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); } .geo-button { display: inline-block; padding: var(--geo-spacing-md) var(--geo-spacing-xl); border-radius: 14px; font-weight: 600; text-decoration: none; transition: all var(--geo-transition); border: none; cursor: pointer; } .geo-button--primary { background: var(--geo-primary); color: var(--geo-white); } .geo-button--primary:hover { background: var(--geo-secondary); transform: translateY(-2px); } .geo-button--primary:focus-visible { outline: 3px solid var(--geo-blue); outline-offset: 2px; } .geo-button--accent { background: var(--geo-accent); color: var(--geo-white); } .geo-button--accent:hover { background: #C73846; } .geo-highlight-box { background: linear-gradient(135deg, #E3F2FD 0%, var(--geo-gray-50) 100%); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); border-left: 4px solid var(--geo-blue); margin: var(--geo-spacing-xl) 0; } .geo-case-study { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow); border-top: 4px solid var(--geo-blue); margin-bottom: var(--geo-spacing-xl); } .geo-cta-section { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-3xl) var(--geo-spacing-lg); color: var(--geo-white); text-align: center; } .geo-cta__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--geo-spacing-lg); } .geo-cta__text { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .geo-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--geo-spacing-xl); margin: var(--geo-spacing-2xl) 0; } .geo-pricing-card { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow); transition: transform var(--geo-transition); } .geo-pricing-card:hover { transform: translateY(-4px); } .geo-faq-item { background: var(--geo-white); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); box-shadow: var(--geo-shadow); margin-bottom: var(--geo-spacing-lg); } .geo-faq__question { font-size: 1.25rem; font-weight: 700; color: var(--geo-primary); margin-bottom: var(--geo-spacing-md); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media (max-width: 768px) { .geo-stats-grid, .geo-pricing-grid { grid-template-columns: 1fr; } .geo-table { font-size: 0.875rem; } .geo-table th, .geo-table td { padding: var(--geo-spacing-sm); } } :root { --gvs-primary: #194A9A; --gvs-secondary: #2F62AD; --gvs-blue: #348EDF; --gvs-accent: #DF4756; --gvs-dark: #011F4E; --gvs-black: #000000; --gvs-white: #FFFFFF; --gvs-gray-50: #F9FAFB; --gvs-gray-100: #F3F4F6; --gvs-gray-200: #E5E7EB; --gvs-gray-600: #4B5563; --gvs-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --gvs-spacing-unit: 8px; --gvs-radius: 14px; --gvs-radius-sm: 8px; --gvs-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --gvs-shadow-md: 0 4px 16px rgba(0,0,0,0.12); } @keyframes gvsFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .gvs-wrapper { min-height: 100vh; background: var(--gvs-white); } .gvs-hero { background: linear-gradient(135deg, var(--gvs-dark) 0%, var(--gvs-primary) 100%); padding: clamp(80px, 10vw, 120px) calc(var(--gvs-spacing-unit) * 3); text-align: center; position: relative; overflow: hidden; } .gvs-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gvs-hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; animation: gvsFadeInUp 0.8s ease-out; } .gvs-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--gvs-white); margin-bottom: calc(var(--gvs-spacing-unit) * 3); line-height: 1.2; } .gvs-content { padding: calc(var(--gvs-spacing-unit) * 8) calc(var(--gvs-spacing-unit) * 3); background: var(--gvs-gray-50); } .gvs-content__container { max-width: 1200px; margin: 0 auto; } .gvs-content__article { background: var(--gvs-white); border-radius: var(--gvs-radius); padding: calc(var(--gvs-spacing-unit) * 6); box-shadow: var(--gvs-shadow-sm); animation: gvsFadeInUp 1s ease-out 0.2s both; } .gvs-section { margin-bottom: calc(var(--gvs-spacing-unit) * 8); animation: gvsFadeInUp 0.8s ease-out; } .gvs-section--intro { animation-delay: 0.1s; } .gvs-section__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gvs-dark); margin: calc(var(--gvs-spacing-unit) * 5) 0 calc(var(--gvs-spacing-unit) * 3); font-weight: 700; padding-bottom: calc(var(--gvs-spacing-unit) * 2); border-bottom: 2px solid var(--gvs-gray-200); } .gvs-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--gvs-primary); margin: calc(var(--gvs-spacing-unit) * 4) 0 calc(var(--gvs-spacing-unit) * 2); font-weight: 600; } .gvs-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--gvs-gray-600); margin-bottom: calc(var(--gvs-spacing-unit) * 2); } .gvs-list { list-style: none; padding: 0; margin: calc(var(--gvs-spacing-unit) * 3) 0; } .gvs-list__item { padding: calc(var(--gvs-spacing-unit) * 1.5) 0; padding-left: calc(var(--gvs-spacing-unit) * 4); position: relative; line-height: 1.8; color: var(--gvs-gray-600); } .gvs-list__item::before { content: "•"; position: absolute; left: calc(var(--gvs-spacing-unit) * 1.5); color: var(--gvs-blue); font-weight: bold; } .gvs-list__item strong { color: var(--gvs-dark); font-weight: 600; } .gvs-meta { text-align: center; padding: calc(var(--gvs-spacing-unit) * 2) 0; margin-bottom: calc(var(--gvs-spacing-unit) * 4); border-bottom: 1px solid var(--gvs-gray-200); animation: gvsFadeInUp 0.6s ease-out; } .gvs-meta__text { color: var(--gvs-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .gvs-content__article { padding: calc(var(--gvs-spacing-unit) * 3); } .dn_table { font-size: 0.875rem; } .dn_table th, .dn_table td { padding: calc(var(--gvs-spacing-unit) * 1.5); } } .gvs-comparison-container { margin: calc(var(--gvs-spacing-unit) * 5) 0; } @media (hover: hover) { .gvs-list__item:hover { transform: translateX(4px); transition: var(--gvs-transition); } } a:focus-visible { outline: 3px solid var(--gvs-blue); outline-offset: 2px; border-radius: var(--gvs-radius-sm); } :root { --chatgpt-primary: #194A9A; --chatgpt-secondary: #2F62AD; --chatgpt-blue: #348EDF; --chatgpt-accent: #DF4756; --chatgpt-dark: #011F4E; --chatgpt-black: #000000; --chatgpt-white: #FFFFFF; --chatgpt-gray-50: #F8F9FA; --chatgpt-gray-100: #F1F5F9; --chatgpt-gray-200: #E2E8F0; --chatgpt-gray-300: #CBD5E1; --chatgpt-gray-600: #475569; --chatgpt-gray-700: #334155; --chatgpt-gray-800: #1E293B; --chatgpt-space-4: 4px; --chatgpt-space-8: 8px; --chatgpt-space-12: 12px; --chatgpt-space-16: 16px; --chatgpt-space-20: 20px; --chatgpt-space-24: 24px; --chatgpt-space-32: 32px; --chatgpt-space-40: 40px; --chatgpt-space-48: 48px; --chatgpt-space-64: 64px; --chatgpt-space-80: 80px; --chatgpt-space-96: 96px; --chatgpt-radius: 14px; --chatgpt-radius-sm: 8px; --chatgpt-radius-lg: 20px; --chatgpt-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --chatgpt-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --chatgpt-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --chatgpt-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes chatgpt-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chatgpt-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--chatgpt-black); background: var(--chatgpt-white); } .chatgpt-hero { background: linear-gradient(135deg, var(--chatgpt-dark) 0%, var(--chatgpt-primary) 100%); padding: clamp(var(--chatgpt-space-64), 8vw, var(--chatgpt-space-96)) 0; text-align: center; position: relative; overflow: hidden; } .chatgpt-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .chatgpt-hero__container { max-width: 1000px; margin: 0 auto; padding: 0 var(--chatgpt-space-24); position: relative; z-index: 1; animation: chatgpt-fadeInUp 0.8s ease-out; } .chatgpt-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--chatgpt-white); margin-bottom: var(--chatgpt-space-24); line-height: 1.2; } .chatgpt-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--chatgpt-gray-200); max-width: 800px; margin: 0 auto; line-height: 1.5; } .chatgpt-content { padding: var(--chatgpt-space-80) 0; background: var(--chatgpt-gray-50); } .chatgpt-content__wrapper { max-width: 900px; margin: 0 auto; padding: 0 var(--chatgpt-space-24); } .chatgpt-section { background: var(--chatgpt-white); border-radius: var(--chatgpt-radius); padding: var(--chatgpt-space-48); margin-bottom: var(--chatgpt-space-32); box-shadow: var(--chatgpt-shadow-sm); animation: chatgpt-fadeInUp 0.8s ease-out; } .chatgpt-section__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--chatgpt-dark); margin-bottom: var(--chatgpt-space-32); padding-bottom: var(--chatgpt-space-16); border-bottom: 2px solid var(--chatgpt-gray-200); } .chatgpt-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--chatgpt-primary); margin: var(--chatgpt-space-32) 0 var(--chatgpt-space-20); } .chatgpt-section__subheading { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 600; color: var(--chatgpt-blue); margin: var(--chatgpt-space-24) 0 var(--chatgpt-space-16); } .chatgpt-section p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--chatgpt-gray-700); margin-bottom: var(--chatgpt-space-20); } .chatgpt-section ul, .chatgpt-section ol { margin: var(--chatgpt-space-20) 0; padding-left: var(--chatgpt-space-32); } .chatgpt-section li { margin-bottom: var(--chatgpt-space-12); line-height: 1.8; color: var(--chatgpt-gray-700); } .chatgpt-blockquote { background: linear-gradient(135deg, var(--chatgpt-gray-50) 0%, var(--chatgpt-gray-100) 100%); border-left: 4px solid var(--chatgpt-blue); padding: var(--chatgpt-space-24); margin: var(--chatgpt-space-32) 0; border-radius: var(--chatgpt-radius-sm); } .chatgpt-blockquote p { font-style: italic; color: var(--chatgpt-gray-800); margin: 0; } .chatgpt-code { background: var(--chatgpt-gray-800); color: var(--chatgpt-white); padding: var(--chatgpt-space-24); border-radius: var(--chatgpt-radius); overflow-x: auto; margin: var(--chatgpt-space-32) 0; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.6; } .chatgpt-highlight-box { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); border: 2px solid var(--chatgpt-blue); border-radius: var(--chatgpt-radius); padding: var(--chatgpt-space-32); margin: var(--chatgpt-space-40) 0; } .chatgpt-highlight-box h3 { color: var(--chatgpt-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--chatgpt-space-20); } .chatgpt-highlight-box p { color: var(--chatgpt-gray-800); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; } .chatgpt-cta { background: linear-gradient(135deg, var(--chatgpt-primary) 0%, var(--chatgpt-secondary) 100%); border-radius: var(--chatgpt-radius); padding: var(--chatgpt-space-48); margin: var(--chatgpt-space-48) 0; text-align: center; color: var(--chatgpt-white); } .chatgpt-cta h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--chatgpt-space-20); } .chatgpt-cta p { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--chatgpt-white); line-height: 1.8; } .chatgpt-cta strong { color: var(--chatgpt-white); font-weight: 700; } .chatgpt-meta { background: var(--chatgpt-gray-100); padding: var(--chatgpt-space-32); border-radius: var(--chatgpt-radius); margin-top: var(--chatgpt-space-48); } .chatgpt-meta p { margin: 0; color: var(--chatgpt-gray-600); line-height: 2; } .chatgpt-meta strong { color: var(--chatgpt-gray-700); } @media (prefers-reduced-motion: no-preference) { .chatgpt-section:nth-child(1) { animation-delay: 0.1s; } .chatgpt-section:nth-child(2) { animation-delay: 0.2s; } .chatgpt-section:nth-child(3) { animation-delay: 0.3s; } .chatgpt-section:nth-child(4) { animation-delay: 0.4s; } .chatgpt-section:nth-child(5) { animation-delay: 0.5s; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .chatgpt-section { padding: var(--chatgpt-space-32) var(--chatgpt-space-20); } .chatgpt-hero__container { padding: 0 var(--chatgpt-space-16); } .chatgpt-content__wrapper { padding: 0 var(--chatgpt-space-16); } } .chatgpt-section a { color: var(--chatgpt-blue); text-decoration: none; transition: var(--chatgpt-transition); } .chatgpt-section a:hover { color: var(--chatgpt-primary); text-decoration: underline; } .chatgpt-section a:focus-visible { outline: 2px solid var(--chatgpt-blue); outline-offset: 2px; border-radius: var(--chatgpt-radius-sm); } :root { --dn-geo-primary: #194A9A; --dn-geo-secondary: #2F62AD; --dn-geo-blue: #348EDF; --dn-geo-accent: #DF4756; --dn-geo-dark: #011F4E; --dn-geo-black: #000000; --dn-geo-white: #FFFFFF; --dn-geo-gray-50: #F9FAFB; --dn-geo-gray-100: #F3F4F6; --dn-geo-gray-200: #E5E7EB; --dn-geo-gray-600: #4B5563; --dn-geo-gray-700: #374151; --dn-geo-spacing-xs: 4px; --dn-geo-spacing-sm: 8px; --dn-geo-spacing-md: 16px; --dn-geo-spacing-lg: 24px; --dn-geo-spacing-xl: 32px; --dn-geo-spacing-2xl: 48px; --dn-geo-spacing-3xl: 64px; --dn-geo-spacing-4xl: 96px; --dn-geo-radius: 14px; --dn-geo-radius-sm: 8px; --dn-geo-radius-lg: 20px; --dn-geo-shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --dn-geo-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --dn-geo-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --dn-geo-transition: 300ms ease; } @keyframes dn-geo-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .dn-geo-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--dn-geo-black); background: var(--dn-geo-white); } .dn-geo-breadcrumb { background: var(--dn-geo-gray-50); padding: var(--dn-geo-spacing-md) 0; border-bottom: 1px solid var(--dn-geo-gray-200); } .dn-geo-breadcrumb__list { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-geo-spacing-lg); display: flex; align-items: center; gap: var(--dn-geo-spacing-sm); list-style: none; flex-wrap: wrap; } .dn-geo-breadcrumb__item { display: flex; align-items: center; gap: var(--dn-geo-spacing-sm); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-geo-breadcrumb__item::after { content: '/'; color: var(--dn-geo-gray-600); margin-left: var(--dn-geo-spacing-sm); } .dn-geo-breadcrumb__item:last-child::after { display: none; } .dn-geo-breadcrumb__link { color: var(--dn-geo-blue); text-decoration: none; transition: var(--dn-geo-transition); } .dn-geo-breadcrumb__link:hover { color: var(--dn-geo-primary); text-decoration: underline; } .dn-geo-breadcrumb__link:focus-visible { outline: 2px solid var(--dn-geo-blue); outline-offset: 2px; border-radius: var(--dn-geo-radius-sm); } .dn-geo-header { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); padding: var(--dn-geo-spacing-4xl) var(--dn-geo-spacing-lg); text-align: center; position: relative; overflow: hidden; animation: dn-geo-fadeInUp 0.8s ease; } .dn-geo-header::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .dn-geo-header__container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .dn-geo-header__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; color: var(--dn-geo-white); margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-header__meta { color: var(--dn-geo-gray-200); font-size: clamp(0.875rem, 1.5vw, 1rem); margin-bottom: var(--dn-geo-spacing-md); } .dn-geo-header__reading { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); display: inline-block; padding: var(--dn-geo-spacing-sm) var(--dn-geo-spacing-lg); border-radius: var(--dn-geo-radius); color: var(--dn-geo-white); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-geo-content { max-width: 1200px; margin: 0 auto; padding: var(--dn-geo-spacing-3xl) var(--dn-geo-spacing-lg); } .dn-geo-intro { background: var(--dn-geo-white); padding: var(--dn-geo-spacing-3xl) 0; animation: dn-geo-fadeInUp 1s ease; } .dn-geo-intro__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-geo-spacing-lg); } .dn-geo-intro__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-xl); font-weight: 700; animation: dn-geo-fadeInUp 1s ease 0.1s both; } .dn-geo-intro__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-lg); animation: dn-geo-fadeInUp 1s ease 0.2s both; } .dn-geo-quote { background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); border-left: 5px solid var(--dn-geo-primary); padding: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-2xl) 0; border-radius: var(--dn-geo-radius); animation: dn-geo-fadeInUp 1s ease 0.3s both; } .dn-geo-quote__text { font-size: clamp(1.125rem, 2vw, 1.25rem); font-style: italic; color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-md); } .dn-geo-quote__author { text-align: right; color: var(--dn-geo-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-geo-section { padding: var(--dn-geo-spacing-3xl) 0; animation: dn-geo-fadeInUp 1s ease; } .dn-geo-section--gray { background: var(--dn-geo-gray-50); } .dn-geo-section__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-geo-spacing-lg); } .dn-geo-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-xl); font-weight: 700; } .dn-geo-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-geo-secondary); margin: var(--dn-geo-spacing-2xl) 0 var(--dn-geo-spacing-lg); font-weight: 600; } .dn-geo-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-components { background: var(--dn-geo-white); border: 1px solid var(--dn-geo-gray-200); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-components__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 600; } .dn-geo-components__list { list-style: none; padding: 0; line-height: 2; } .dn-geo-components__item { padding: var(--dn-geo-spacing-sm) 0; padding-left: var(--dn-geo-spacing-xl); position: relative; color: var(--dn-geo-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-geo-components__item::before { content: '✓'; position: absolute; left: 0; color: var(--dn-geo-blue); font-weight: bold; } .dn-geo-stats { background: var(--dn-geo-white); border: 1px solid var(--dn-geo-gray-200); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-stats__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 600; } .dn-geo-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-geo-spacing-lg); } .dn-geo-stats__item { text-align: center; padding: var(--dn-geo-spacing-lg); background: var(--dn-geo-gray-50); border-radius: var(--dn-geo-radius-sm); transition: var(--dn-geo-transition); } .dn-geo-stats__item:hover { background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); transform: translateY(-2px); } .dn-geo-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-geo-secondary); display: block; } .dn-geo-stats__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-geo-gray-600); display: block; margin-top: var(--dn-geo-spacing-sm); } .dn-geo-table-wrapper { overflow-x: auto; margin: var(--dn-geo-spacing-2xl) 0; } .dn-geo-table { width: 100%; border-collapse: collapse; background: var(--dn-geo-white); box-shadow: var(--dn-geo-shadow-md); border-radius: var(--dn-geo-radius); overflow: hidden; } .dn-geo-table thead { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); } .dn-geo-table th { padding: var(--dn-geo-spacing-md); text-align: left; color: var(--dn-geo-white); font-weight: 600; font-size: clamp(0.875rem, 1vw, 1rem); } .dn-geo-table tbody tr { border-bottom: 1px solid var(--dn-geo-gray-200); transition: var(--dn-geo-transition); } .dn-geo-table tbody tr:hover { background: var(--dn-geo-gray-50); } .dn-geo-table tbody tr:last-child { border-bottom: none; } .dn-geo-table td { padding: var(--dn-geo-spacing-md); color: var(--dn-geo-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-geo-example { background: #FFF9E6; border-left: 4px solid #F59E0B; padding: var(--dn-geo-spacing-lg); margin: var(--dn-geo-spacing-lg) 0; border-radius: var(--dn-geo-radius-sm); } .dn-geo-example__text { color: var(--dn-geo-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.6; } .dn-geo-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-geo-spacing-lg); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-comparison__item { padding: var(--dn-geo-spacing-lg); border-radius: var(--dn-geo-radius); } .dn-geo-comparison__item--negative { background: #FEE2E2; } .dn-geo-comparison__item--positive { background: #DBEAFE; } .dn-geo-comparison__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--dn-geo-spacing-sm); } .dn-geo-comparison__item--negative .dn-geo-comparison__title { color: #DC2626; } .dn-geo-comparison__item--positive .dn-geo-comparison__title { color: #059669; } .dn-geo-comparison__text { color: var(--dn-geo-gray-700); font-size: clamp(0.875rem, 1vw, 0.95rem); } .dn-geo-platforms { padding: var(--dn-geo-spacing-2xl) 0; } .dn-geo-platforms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-geo-spacing-xl); margin-top: var(--dn-geo-spacing-xl); } .dn-geo-platform { background: var(--dn-geo-white); border: 2px solid var(--dn-geo-gray-200); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); transition: var(--dn-geo-transition); } .dn-geo-platform:hover { border-color: var(--dn-geo-blue); box-shadow: var(--dn-geo-shadow-md); transform: translateY(-4px); } .dn-geo-platform__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-platform--chatgpt .dn-geo-platform__title { color: #10A37F; } .dn-geo-platform--gemini .dn-geo-platform__title { color: #4285F4; } .dn-geo-platform--claude .dn-geo-platform__title { color: #8B5CF6; } .dn-geo-platform--perplexity .dn-geo-platform__title { color: #20808D; } .dn-geo-platform--copilot .dn-geo-platform__title { color: #FF6900; } .dn-geo-platform__text { color: var(--dn-geo-gray-700); line-height: 1.6; margin-bottom: var(--dn-geo-spacing-md); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-geo-platform__list { list-style: none; padding: 0; line-height: 1.8; } .dn-geo-platform__item { padding: var(--dn-geo-spacing-xs) 0; color: var(--dn-geo-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-geo-platform__link { color: var(--dn-geo-blue); text-decoration: none; transition: var(--dn-geo-transition); } .dn-geo-platform__link:hover { color: var(--dn-geo-primary); text-decoration: underline; } .dn-geo-platform__link:focus-visible { outline: 2px solid var(--dn-geo-blue); outline-offset: 2px; border-radius: var(--dn-geo-radius-sm); } .dn-geo-checklist { background: var(--dn-geo-white); border: 1px solid var(--dn-geo-gray-200); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-checklist__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 600; } .dn-geo-checklist__list { list-style: none; padding: 0; line-height: 2; } .dn-geo-checklist__item { padding: var(--dn-geo-spacing-sm) 0; padding-left: var(--dn-geo-spacing-xl); position: relative; color: var(--dn-geo-gray-700); } .dn-geo-checklist__item::before { content: '☐'; position: absolute; left: 0; color: var(--dn-geo-gray-600); } .dn-geo-schema { background: var(--dn-geo-gray-50); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-schema__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 600; } .dn-geo-schema__list { list-style: none; padding: 0; font-family: 'Courier New', monospace; line-height: 2; color: var(--dn-geo-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-geo-howto { padding: var(--dn-geo-spacing-3xl) 0; } .dn-geo-howto__title { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 700; } .dn-geo-howto__subtitle { color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-xl); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-geo-phase { background: #E0E7FF; padding: var(--dn-geo-spacing-xl); border-radius: var(--dn-geo-radius); margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-phase--secondary { background: #F3E8FF; } .dn-geo-phase--success { background: #D1FAE5; } .dn-geo-phase--warning { background: #FEF3C7; } .dn-geo-phase__title { color: var(--dn-geo-primary); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-phase__step { margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-phase__step-title { color: var(--dn-geo-dark); font-size: clamp(1rem, 1.5vw, 1.125rem); margin: var(--dn-geo-spacing-md) 0; font-weight: 600; } .dn-geo-phase__step-text { color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-sm); line-height: 1.6; } .dn-geo-phase__list { list-style: none; padding: 0; margin-left: var(--dn-geo-spacing-lg); line-height: 1.8; } .dn-geo-phase__list-item { position: relative; padding-left: var(--dn-geo-spacing-lg); color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-xs); } .dn-geo-phase__list-item::before { content: '•'; position: absolute; left: 0; color: var(--dn-geo-primary); } .dn-geo-case { background: var(--dn-geo-white); border-left: 5px solid; padding: var(--dn-geo-spacing-xl); margin-bottom: var(--dn-geo-spacing-xl); box-shadow: var(--dn-geo-shadow-sm); border-radius: var(--dn-geo-radius); } .dn-geo-case--success { border-color: #10B981; } .dn-geo-case--primary { border-color: var(--dn-geo-blue); } .dn-geo-case--secondary { border-color: #A855F7; } .dn-geo-case__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-case--success .dn-geo-case__title { color: #059669; } .dn-geo-case--primary .dn-geo-case__title { color: var(--dn-geo-primary); } .dn-geo-case--secondary .dn-geo-case__title { color: #7C3AED; } .dn-geo-case__text { color: var(--dn-geo-gray-700); line-height: 1.8; margin-bottom: var(--dn-geo-spacing-md); } .dn-geo-case__results { list-style: none; padding: 0; margin-left: var(--dn-geo-spacing-lg); line-height: 1.8; } .dn-geo-case__result { position: relative; padding-left: var(--dn-geo-spacing-lg); color: var(--dn-geo-gray-700); margin-bottom: var(--dn-geo-spacing-sm); } .dn-geo-case__result::before { content: '•'; position: absolute; left: 0; color: var(--dn-geo-blue); } .dn-geo-faq { background: var(--dn-geo-gray-50); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-lg); margin-bottom: var(--dn-geo-spacing-lg); transition: var(--dn-geo-transition); } .dn-geo-faq:hover { box-shadow: var(--dn-geo-shadow-md); background: var(--dn-geo-white); } .dn-geo-faq__question { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-secondary); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-faq__answer { color: var(--dn-geo-gray-700); line-height: 1.8; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-geo-cta { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); color: var(--dn-geo-white); padding: var(--dn-geo-spacing-4xl) var(--dn-geo-spacing-lg); text-align: center; position: relative; overflow: hidden; } .dn-geo-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .dn-geo-cta__container { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .dn-geo-cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 700; } .dn-geo-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--dn-geo-spacing-2xl); line-height: 1.6; } .dn-geo-cta__box { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin-bottom: var(--dn-geo-spacing-xl); } .dn-geo-cta__box-title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-cta__box-text { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-cta__contact { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; margin-bottom: var(--dn-geo-spacing-sm); } .dn-geo-cta__email { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-geo-spacing-sm); } .dn-geo-cta__address { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-geo-spacing-sm); } .dn-geo-btn { display: inline-block; padding: var(--dn-geo-spacing-md) var(--dn-geo-spacing-xl); border-radius: var(--dn-geo-radius); text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: var(--dn-geo-transition); cursor: pointer; border: none; } .dn-geo-btn--primary { background: var(--dn-geo-accent); color: var(--dn-geo-white); } .dn-geo-btn--primary:hover { background: #C73D4A; transform: translateY(-2px); box-shadow: var(--dn-geo-shadow-md); } .dn-geo-btn--primary:active { transform: translateY(0); } .dn-geo-btn--primary:focus-visible { outline: 3px solid var(--dn-geo-blue); outline-offset: 3px; } .dn-geo-action { background: var(--dn-geo-gray-50); padding: var(--dn-geo-spacing-xl); border-radius: var(--dn-geo-radius); margin: var(--dn-geo-spacing-2xl) 0; text-align: center; } .dn-geo-action__title { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-md); font-weight: 700; } .dn-geo-action__list { list-style: none; padding: 0; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-geo-gray-700); max-width: 700px; margin: 0 auto; text-align: left; } .dn-geo-action__item { padding: var(--dn-geo-spacing-sm) 0; padding-left: var(--dn-geo-spacing-xl); position: relative; } .dn-geo-action__item strong { color: var(--dn-geo-dark); font-weight: 600; } .dn-geo-action__item::before { content: counter(action-counter); counter-increment: action-counter; position: absolute; left: 0; color: var(--dn-geo-blue); font-weight: bold; } .dn-geo-action__list { counter-reset: action-counter; } .dn-geo-about { background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-2xl); margin: var(--dn-geo-spacing-3xl) 0; } .dn-geo-about__title { font-size: clamp(1.5rem, 2vw, 2rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 700; } .dn-geo-about__text { color: var(--dn-geo-gray-700); line-height: 1.8; margin-bottom: var(--dn-geo-spacing-lg); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn-geo-about__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-geo-spacing-xl); margin: var(--dn-geo-spacing-xl) 0; } .dn-geo-about__detail { text-align: center; } .dn-geo-about__detail-title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-geo-secondary); margin-bottom: var(--dn-geo-spacing-sm); font-weight: 600; } .dn-geo-about__detail-text { color: var(--dn-geo-gray-700); line-height: 1.6; } .dn-geo-about__mission { margin-top: var(--dn-geo-spacing-lg); } .dn-geo-about__mission strong { color: var(--dn-geo-dark); font-weight: 600; } .dn-geo-resources { background: var(--dn-geo-white); border: 2px solid var(--dn-geo-primary); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); margin-top: var(--dn-geo-spacing-3xl); } .dn-geo-resources__title { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 700; } .dn-geo-resources__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-secondary); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn-geo-resources__list { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--dn-geo-spacing-lg); } .dn-geo-resources__item { padding: var(--dn-geo-spacing-xs) 0; } .dn-geo-resources__link { color: var(--dn-geo-blue); text-decoration: none; transition: var(--dn-geo-transition); } .dn-geo-resources__link:hover { color: var(--dn-geo-primary); text-decoration: underline; } .dn-geo-resources__link:focus-visible { outline: 2px solid var(--dn-geo-blue); outline-offset: 2px; border-radius: var(--dn-geo-radius-sm); } .dn-geo-footer { text-align: center; padding: var(--dn-geo-spacing-3xl) var(--dn-geo-spacing-lg); border-top: 2px solid var(--dn-geo-gray-200); color: var(--dn-geo-gray-600); margin-top: var(--dn-geo-spacing-3xl); } @media (max-width: 768px) { .dn-geo-stats__grid, .dn-geo-comparison, .dn-geo-platforms__grid, .dn-geo-about__details { grid-template-columns: 1fr; } .dn-geo-table { font-size: 0.875rem; } .dn-geo-table th, .dn-geo-table td { padding: var(--dn-geo-spacing-sm); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --case-primary: #194A9A; --case-secondary: #2F62AD; --case-blue: #348EDF; --case-accent: #DF4756; --case-dark: #011F4E; --case-white: #ffffff; --case-black: #000000; --case-gray-50: #f9fafb; --case-gray-100: #f3f4f6; --case-gray-200: #e5e7eb; --case-gray-300: #d1d5db; --case-gray-600: #6b7280; --case-gray-700: #374151; --case-gray-800: #1f2937; --case-spacing-xs: 4px; --case-spacing-sm: 8px; --case-spacing-md: 16px; --case-spacing-lg: 24px; --case-spacing-xl: 32px; --case-spacing-2xl: 48px; --case-spacing-3xl: 64px; --case-spacing-4xl: 96px; --case-radius: 14px; --case-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --case-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --case-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --case-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes caseFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .case-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--case-gray-800); } .case-hero { background: linear-gradient(135deg, var(--case-dark) 0%, var(--case-primary) 100%); padding: var(--case-spacing-4xl) var(--case-spacing-lg); color: var(--case-white); animation: caseFadeUp 0.8s ease; } @media (prefers-reduced-motion: reduce) { .case-hero, .case-section { animation: none; } } .case-container { max-width: 1200px; margin: 0 auto; } .case-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--case-spacing-lg); } .case-hero__subtitle { display: block; font-size: clamp(1.25rem, 3vw, 2rem); color: var(--case-blue); margin-top: var(--case-spacing-md); } .case-hero__description { font-size: clamp(1rem, 2vw, 1.25rem); opacity: 0.95; margin-top: var(--case-spacing-xl); } .case-summary { background: var(--case-gray-50); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 0.9s ease; animation-fill-mode: both; } .case-summary__card { background: var(--case-white); border-radius: var(--case-radius); padding: var(--case-spacing-2xl); box-shadow: var(--case-shadow-md); } .case-summary__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--case-dark); margin-bottom: var(--case-spacing-xl); } .case-summary__content p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--case-spacing-lg); } .case-highlight { color: var(--case-accent); font-weight: 700; } .case-dashboard { padding: var(--case-spacing-3xl) var(--case-spacing-lg); background: var(--case-white); animation: caseFadeUp 1s ease; animation-fill-mode: both; } .case-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--case-dark); margin-bottom: var(--case-spacing-2xl); text-align: center; } .case-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--case-spacing-xl); } .case-card { background: var(--case-white); border-radius: var(--case-radius); padding: var(--case-spacing-xl); box-shadow: var(--case-shadow-sm); border: 1px solid var(--case-gray-200); transition: transform var(--case-transition), box-shadow var(--case-transition); } .case-card:hover { transform: translateY(-4px); box-shadow: var(--case-shadow-lg); } .case-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--case-spacing-lg); } .case-badge { padding: var(--case-spacing-xs) var(--case-spacing-md); border-radius: 20px; font-size: 0.875rem; font-weight: 600; } .case-badge--warning { background: #ffc107; color: var(--case-black); } .case-badge--success { background: #28a745; color: var(--case-white); } .case-badge--danger { background: var(--case-accent); color: var(--case-white); } .case-card__title { font-size: 1.25rem; color: var(--case-primary); font-weight: 700; } .case-card__list { list-style: none; padding: 0; margin-bottom: var(--case-spacing-lg); } .case-card__item { padding: var(--case-spacing-sm) 0; line-height: 1.6; } .case-card__item--success { color: #28a745; } .case-card__item--warning { color: #ff9f43; } .case-card__item--danger { color: var(--case-accent); } .case-card__stats { padding-top: var(--case-spacing-lg); border-top: 1px solid var(--case-gray-200); } .case-card__stats p { margin: var(--case-spacing-xs) 0; font-size: 0.9rem; color: var(--case-gray-700); } .case-competitive { background: var(--case-gray-50); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.1s ease; animation-fill-mode: both; } .case-table-wrapper { overflow-x: auto; } .case-table { width: 100%; border-collapse: collapse; background: var(--case-white); box-shadow: var(--case-shadow-md); border-radius: var(--case-radius); } .case-table thead { background: linear-gradient(135deg, var(--case-dark) 0%, var(--case-primary) 100%); } .case-table thead tr th { padding: var(--case-spacing-lg); text-align: left; color: var(--case-white); font-weight: 600; } .case-table tbody tr { border-bottom: 1px solid var(--case-gray-200); } .case-table tbody tr:hover { background: var(--case-gray-50); } .case-table tbody tr td { padding: var(--case-spacing-lg); } .case-table__cell--danger { color: var(--case-accent); font-weight: 600; } .case-table__cell--success { color: #28a745; font-weight: 600; } .case-table__cell--bold { font-weight: 700; color: var(--case-dark); } .case-opportunity { background: var(--case-white); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.2s ease; animation-fill-mode: both; } .case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--case-spacing-xl); margin-bottom: var(--case-spacing-2xl); } .case-stat { text-align: center; padding: var(--case-spacing-xl); background: var(--case-gray-50); border-radius: var(--case-radius); } .case-stat--current { border: 2px solid var(--case-accent); } .case-stat--potential { border: 2px solid var(--case-blue); background: linear-gradient(135deg, #e8f4fd 0%, var(--case-gray-50) 100%); } .case-stat__title { font-size: 1.25rem; color: var(--case-dark); margin-bottom: var(--case-spacing-lg); font-weight: 700; } .case-stat__value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--case-primary); display: block; margin-bottom: var(--case-spacing-sm); } .case-stat__value--danger { color: var(--case-accent); } .case-stat__value--success { color: #28a745; } .case-stat__label { font-size: 0.9rem; color: var(--case-gray-600); display: block; margin-bottom: var(--case-spacing-lg); } .case-loss-banner { background: linear-gradient(135deg, var(--case-accent) 0%, #e74c3c 100%); color: var(--case-white); padding: var(--case-spacing-2xl); border-radius: var(--case-radius); text-align: center; } .case-loss-banner__title { font-size: 1.5rem; margin-bottom: var(--case-spacing-md); } .case-loss-banner__amount { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--case-spacing-md); } .case-loss-banner__description { font-size: 1.125rem; opacity: 0.95; } .case-channels { background: var(--case-gray-50); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.3s ease; animation-fill-mode: both; } .case-channel { background: var(--case-white); border-radius: var(--case-radius); padding: var(--case-spacing-2xl); margin-bottom: var(--case-spacing-xl); box-shadow: var(--case-shadow-sm); } .case-channel--critical { border: 2px solid var(--case-accent); } .case-channel__title { font-size: 1.5rem; color: var(--case-dark); margin-bottom: var(--case-spacing-lg); } .case-channel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--case-spacing-xl); } .case-channel__column h4 { color: var(--case-primary); margin-bottom: var(--case-spacing-md); } .case-channel__column ul { list-style: none; padding: 0; } .case-channel__column ul li { padding: var(--case-spacing-xs) 0; line-height: 1.6; } .case-channel__finding { background: var(--case-gray-100); padding: var(--case-spacing-lg); border-radius: var(--case-radius); margin-top: var(--case-spacing-lg); border-left: 4px solid var(--case-blue); } .case-alert { background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%); padding: var(--case-spacing-xl); border-radius: var(--case-radius); border: 2px solid var(--case-accent); } .case-alert__title { color: var(--case-accent); font-size: 1.25rem; margin-bottom: var(--case-spacing-md); } .case-roadmap { background: linear-gradient(135deg, var(--case-primary) 0%, var(--case-secondary) 100%); padding: var(--case-spacing-4xl) var(--case-spacing-lg); color: var(--case-white); animation: caseFadeUp 1.4s ease; animation-fill-mode: both; } .case-section__title--white { color: var(--case-white); } .case-roadmap__subtitle { text-align: center; font-size: 1.25rem; opacity: 0.95; margin-bottom: var(--case-spacing-2xl); } .case-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--case-spacing-xl); } .case-phase { background: rgba(255, 255, 255, 0.95); color: var(--case-dark); border-radius: var(--case-radius); padding: var(--case-spacing-xl); transition: transform var(--case-transition); } .case-phase:hover { transform: translateY(-4px); box-shadow: var(--case-shadow-lg); } .case-phase__title { font-size: 1.25rem; color: var(--case-primary); margin-bottom: var(--case-spacing-lg); font-weight: 700; } .case-phase__content { margin-bottom: var(--case-spacing-lg); } .case-phase__list { list-style: none; padding: 0; } .case-phase__list li { padding: var(--case-spacing-xs) 0; line-height: 1.6; } .case-phase__result { background: var(--case-gray-100); padding: var(--case-spacing-md); border-radius: var(--case-radius); border-left: 4px solid var(--case-blue); } .case-roi { background: var(--case-white); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.5s ease; animation-fill-mode: both; } .case-roi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--case-spacing-xl); } .case-roi__card { padding: var(--case-spacing-xl); border-radius: var(--case-radius); box-shadow: var(--case-shadow-md); } .case-roi__card--current { background: linear-gradient(135deg, #fff5f5 0%, var(--case-white) 100%); border: 2px solid var(--case-accent); } .case-roi__card--recommended { background: linear-gradient(135deg, #e8f4fd 0%, var(--case-white) 100%); border: 2px solid var(--case-blue); } .case-roi__title { font-size: 1.25rem; color: var(--case-dark); margin-bottom: var(--case-spacing-lg); font-weight: 700; } .case-roi__metrics { margin-bottom: var(--case-spacing-lg); } .case-roi__metric { display: flex; justify-content: space-between; padding: var(--case-spacing-sm) 0; border-bottom: 1px solid var(--case-gray-200); } .case-roi__metric--danger { color: var(--case-accent); } .case-roi__metric--success { color: #28a745; } .case-roi__summary { padding-top: var(--case-spacing-lg); border-top: 2px solid var(--case-gray-200); text-align: center; font-size: 1.25rem; font-weight: 700; } .case-competitor { background: var(--case-gray-50); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.6s ease; animation-fill-mode: both; } .case-example { background: var(--case-white); border-radius: var(--case-radius); padding: var(--case-spacing-2xl); box-shadow: var(--case-shadow-md); } .case-example__title { font-size: 1.5rem; color: var(--case-dark); margin-bottom: var(--case-spacing-lg); } .case-example__list { list-style: none; padding: 0; margin-bottom: var(--case-spacing-xl); } .case-example__list li { padding: var(--case-spacing-sm) 0; line-height: 1.8; border-bottom: 1px solid var(--case-gray-100); } .case-example__insight { background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%); padding: var(--case-spacing-lg); border-radius: var(--case-radius); border-left: 4px solid #ffc107; } .case-actions { background: var(--case-white); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.7s ease; animation-fill-mode: both; } .case-actions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--case-spacing-xl); } .case-action { background: var(--case-gray-50); border-radius: var(--case-radius); padding: var(--case-spacing-xl); transition: transform var(--case-transition); } .case-action:hover { transform: translateY(-4px); box-shadow: var(--case-shadow-md); } .case-action__title { font-size: 1.25rem; color: var(--case-primary); margin-bottom: var(--case-spacing-lg); } .case-action__list { list-style-type: decimal; padding-left: var(--case-spacing-lg); line-height: 2; } .case-cta { background: linear-gradient(135deg, var(--case-dark) 0%, var(--case-primary) 100%); padding: var(--case-spacing-4xl) var(--case-spacing-lg); color: var(--case-white); text-align: center; animation: caseFadeUp 1.8s ease; animation-fill-mode: both; } .case-cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--case-spacing-lg); } .case-cta__description { font-size: 1.125rem; line-height: 1.8; max-width: 900px; margin: 0 auto var(--case-spacing-2xl); opacity: 0.95; } .case-cta__steps { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--case-radius); padding: var(--case-spacing-2xl); max-width: 600px; margin: 0 auto var(--case-spacing-2xl); } .case-cta__steps h3 { font-size: 1.5rem; margin-bottom: var(--case-spacing-lg); } .case-cta__steps ol { list-style-type: decimal; padding-left: var(--case-spacing-xl); line-height: 2; text-align: left; } .case-btn { display: inline-block; background: var(--case-accent); color: var(--case-white); padding: var(--case-spacing-md) var(--case-spacing-xl); border-radius: 14px; text-decoration: none; font-weight: 600; transition: all var(--case-transition); margin-bottom: var(--case-spacing-xl); } .case-btn:hover { background: #c73846; transform: translateY(-2px); box-shadow: var(--case-shadow-lg); } .case-btn:focus-visible { outline: 3px solid var(--case-blue); outline-offset: 3px; } .case-btn--primary { background: var(--case-blue); } .case-btn--primary:hover { background: var(--case-secondary); } .case-cta__contact { font-size: 1.125rem; } .case-conclusion { background: var(--case-gray-50); padding: var(--case-spacing-3xl) var(--case-spacing-lg); animation: caseFadeUp 1.9s ease; animation-fill-mode: both; } .case-conclusion p { font-size: 1.125rem; line-height: 1.8; margin-bottom: var(--case-spacing-lg); } .case-footer { background: var(--case-white); padding: var(--case-spacing-2xl) var(--case-spacing-lg); border-top: 1px solid var(--case-gray-200); animation: caseFadeUp 2s ease; animation-fill-mode: both; } .case-link { color: var(--case-primary); text-decoration: none; font-weight: 600; transition: color var(--case-transition); } .case-link:hover { color: var(--case-blue); text-decoration: underline; } .case-link:focus-visible { outline: 2px solid var(--case-blue); outline-offset: 2px; border-radius: 4px; } @media (max-width: 768px) { .case-cards, .case-stats, .case-channel__grid, .case-timeline, .case-roi__grid, .case-actions__grid { grid-template-columns: 1fr; } .case-table { font-size: 0.875rem; } .case-table thead tr th, .case-table tbody tr td { padding: var(--case-spacing-md); } } :root { --dn-calc-primary: #194A9A; --dn-calc-secondary: #2F62AD; --dn-calc-blue: #348EDF; --dn-calc-accent: #DF4756; --dn-calc-dark: #011F4E; --dn-calc-black: #000000; --dn-calc-white: #ffffff; --dn-calc-gray-50: #f9fafb; --dn-calc-gray-100: #f3f4f6; --dn-calc-gray-200: #e5e7eb; --dn-calc-gray-300: #d1d5db; --dn-calc-gray-600: #4b5563; --dn-calc-gray-700: #374151; --dn-calc-spacing-xs: 4px; --dn-calc-spacing-sm: 8px; --dn-calc-spacing-md: 16px; --dn-calc-spacing-lg: 24px; --dn-calc-spacing-xl: 32px; --dn-calc-spacing-2xl: 48px; --dn-calc-spacing-3xl: 64px; --dn-calc-spacing-4xl: 96px; --dn-calc-radius: 14px; --dn-calc-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); --dn-calc-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.15); --dn-calc-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dn-calc-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn-calc-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--dn-calc-black); line-height: 1.6; } .dn-calc-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-calc-spacing-lg); } .dn-calc-hero { background: linear-gradient(135deg, var(--dn-calc-dark) 0%, var(--dn-calc-primary) 100%); color: var(--dn-calc-white); padding: var(--dn-calc-spacing-4xl) 0; animation: dn-calc-fadeInUp 0.8s ease; } .dn-calc-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-calc-spacing-lg); line-height: 1.2; } .dn-calc-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); opacity: 0.95; max-width: 800px; margin: 0 auto; } .dn-calc-stats { padding: var(--dn-calc-spacing-3xl) 0; background: var(--dn-calc-gray-50); } .dn-calc-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-calc-spacing-lg); } .dn-calc-stats__item { background: var(--dn-calc-white); padding: var(--dn-calc-spacing-xl); border-radius: var(--dn-calc-radius); text-align: center; border-top: 4px solid var(--dn-calc-blue); box-shadow: var(--dn-calc-shadow); transition: transform var(--dn-calc-transition); animation: dn-calc-fadeInUp 0.8s ease; animation-fill-mode: both; } .dn-calc-stats__item:nth-child(1) { animation-delay: 0.1s; } .dn-calc-stats__item:nth-child(2) { animation-delay: 0.2s; } .dn-calc-stats__item:nth-child(3) { animation-delay: 0.3s; } .dn-calc-stats__item:nth-child(4) { animation-delay: 0.4s; } .dn-calc-stats__item:hover { transform: translateY(-4px); } .dn-calc-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-calc-primary); margin-bottom: var(--dn-calc-spacing-sm); } .dn-calc-stats__label { color: var(--dn-calc-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn-calc-warning { background: #fff3cd; border-left: 5px solid #ffc107; padding: var(--dn-calc-spacing-xl); border-radius: var(--dn-calc-radius); margin: var(--dn-calc-spacing-2xl) 0; animation: dn-calc-fadeInUp 0.8s ease 0.5s both; } .dn-calc-warning__title { color: #856404; font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; margin: 0 0 var(--dn-calc-spacing-md) 0; } .dn-calc-warning p { margin-bottom: var(--dn-calc-spacing-sm); line-height: 1.8; color: #856404; } .dn-calc-form { background: var(--dn-calc-white); border: 2px solid var(--dn-calc-gray-200); border-radius: var(--dn-calc-radius); padding: var(--dn-calc-spacing-2xl); box-shadow: var(--dn-calc-shadow-lg); margin: var(--dn-calc-spacing-2xl) 0; animation: dn-calc-fadeInUp 0.8s ease 0.6s both; } .dn-calc-form__title { text-align: center; font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--dn-calc-spacing-sm); color: var(--dn-calc-dark); } .dn-calc-form__subtitle { text-align: center; color: var(--dn-calc-gray-600); margin-bottom: var(--dn-calc-spacing-2xl); } .dn-calc-form__group { margin-bottom: var(--dn-calc-spacing-xl); } .dn-calc-form__label { display: block; font-weight: 600; margin-bottom: var(--dn-calc-spacing-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-calc-dark); } .dn-calc-form__select, .dn-calc-form__input { width: 100%; padding: var(--dn-calc-spacing-md); border: 2px solid var(--dn-calc-gray-200); border-radius: var(--dn-calc-radius); font-size: 1rem; background: var(--dn-calc-white); transition: border-color var(--dn-calc-transition); } .dn-calc-form__select:focus, .dn-calc-form__input:focus { outline: none; border-color: var(--dn-calc-blue); } .dn-calc-form__select:focus-visible, .dn-calc-form__input:focus-visible { outline: 3px solid var(--dn-calc-blue); outline-offset: 2px; } .dn-calc-form__radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-calc-spacing-md); } .dn-calc-form__radio-label { cursor: pointer; position: relative; } .dn-calc-form__radio-label input { position: absolute; opacity: 0; } .dn-calc-form__radio-label span { display: block; background: var(--dn-calc-gray-50); padding: var(--dn-calc-spacing-md) var(--dn-calc-spacing-lg); border-radius: var(--dn-calc-radius); text-align: center; transition: all var(--dn-calc-transition); border: 2px solid transparent; } .dn-calc-form__radio-label input:checked + span { background: var(--dn-calc-primary); color: var(--dn-calc-white); } .dn-calc-form__radio-label:hover span { border-color: var(--dn-calc-blue); } .dn-calc-form__checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-calc-spacing-md); } .dn-calc-form__checkbox-label { cursor: pointer; display: flex; align-items: center; gap: var(--dn-calc-spacing-sm); transition: color var(--dn-calc-transition); } .dn-calc-form__checkbox-label:hover { color: var(--dn-calc-primary); } .dn-calc-form__hint { color: var(--dn-calc-gray-600); margin-top: var(--dn-calc-spacing-xs); font-size: 0.875rem; } .dn-calc-form__submit { text-align: center; margin-top: var(--dn-calc-spacing-2xl); } .dn-calc-btn { background: linear-gradient(135deg, var(--dn-calc-primary) 0%, var(--dn-calc-secondary) 100%); color: var(--dn-calc-white); padding: var(--dn-calc-spacing-lg) var(--dn-calc-spacing-3xl); border: none; border-radius: var(--dn-calc-radius); font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; cursor: pointer; transition: all var(--dn-calc-transition); display: inline-block; text-decoration: none; } .dn-calc-btn:hover { transform: translateY(-2px); box-shadow: var(--dn-calc-shadow-lg); } .dn-calc-btn:focus-visible { outline: 3px solid var(--dn-calc-blue); outline-offset: 3px; } .dn-calc-btn--accent { background: linear-gradient(135deg, var(--dn-calc-accent) 0%, #c73846 100%); } .dn-calc-results { display: none; margin-top: var(--dn-calc-spacing-3xl); } .dn-calc-results--visible { display: block; animation: dn-calc-fadeInUp 0.8s ease; } .dn-calc-result-card { padding: var(--dn-calc-spacing-xl); border-radius: var(--dn-calc-radius); margin-bottom: var(--dn-calc-spacing-xl); } .dn-calc-result-card--warning { background: #fff3cd; } .dn-calc-result-card--success { background: linear-gradient(135deg, rgba(25, 74, 154, 0.1) 0%, rgba(52, 142, 223, 0.1) 100%); border: 2px solid var(--dn-calc-blue); } .dn-calc-result-card--highlight { background: #28a745; color: var(--dn-calc-white); text-align: center; } .dn-calc-result-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-calc-spacing-lg); color: inherit; } .dn-calc-result-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-calc-spacing-lg); } .dn-calc-result-card__metric { text-align: center; } .dn-calc-result-card__value { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: var(--dn-calc-spacing-xs); } .dn-calc-result-card__label { font-size: 0.875rem; opacity: 0.9; } .dn-calc-table { width: 100%; border-collapse: collapse; background: var(--dn-calc-white); border-radius: var(--dn-calc-radius); overflow: hidden; box-shadow: var(--dn-calc-shadow); margin: var(--dn-calc-spacing-2xl) 0; } .dn-calc-table thead { background: linear-gradient(135deg, var(--dn-calc-primary) 0%, var(--dn-calc-secondary) 100%); } .dn-calc-table th { color: var(--dn-calc-white); padding: var(--dn-calc-spacing-md); text-align: left; font-weight: 600; } .dn-calc-table tbody tr { border-bottom: 1px solid var(--dn-calc-gray-200); transition: background var(--dn-calc-transition); } .dn-calc-table tbody tr:hover { background: var(--dn-calc-gray-50); } .dn-calc-table tbody tr:nth-child(even) { background: var(--dn-calc-gray-50); } .dn-calc-table td { padding: var(--dn-calc-spacing-md); } .dn-calc-pricing { padding: var(--dn-calc-spacing-3xl) 0; background: var(--dn-calc-gray-50); } .dn-calc-pricing__title { text-align: center; font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--dn-calc-dark); margin-bottom: var(--dn-calc-spacing-2xl); } .dn-calc-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-calc-spacing-xl); margin-bottom: var(--dn-calc-spacing-2xl); } .dn-calc-pricing__card { background: var(--dn-calc-white); border: 2px solid var(--dn-calc-gray-200); border-radius: var(--dn-calc-radius); padding: var(--dn-calc-spacing-2xl); text-align: center; position: relative; transition: transform var(--dn-calc-transition); animation: dn-calc-fadeInUp 0.8s ease; animation-fill-mode: both; } .dn-calc-pricing__card:nth-child(1) { animation-delay: 0.1s; } .dn-calc-pricing__card:nth-child(2) { animation-delay: 0.2s; } .dn-calc-pricing__card:nth-child(3) { animation-delay: 0.3s; } .dn-calc-pricing__card:hover { transform: translateY(-4px); box-shadow: var(--dn-calc-shadow-lg); } .dn-calc-pricing__card--featured { border-color: var(--dn-calc-blue); background: linear-gradient(135deg, rgba(25, 74, 154, 0.05) 0%, rgba(52, 142, 223, 0.05) 100%); } .dn-calc-pricing__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #28a745; color: var(--dn-calc-white); padding: var(--dn-calc-spacing-xs) var(--dn-calc-spacing-lg); border-radius: 20px; font-size: 0.875rem; font-weight: 700; } .dn-calc-pricing__name { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-calc-spacing-sm); color: var(--dn-calc-dark); } .dn-calc-pricing__price { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--dn-calc-primary); font-weight: 700; margin: var(--dn-calc-spacing-lg) 0; } .dn-calc-pricing__features { text-align: left; list-style: none; padding: 0; line-height: 2; margin-bottom: var(--dn-calc-spacing-lg); } .dn-calc-pricing__results { padding-top: var(--dn-calc-spacing-lg); border-top: 1px solid var(--dn-calc-gray-200); } .dn-calc-cta { background: linear-gradient(135deg, var(--dn-calc-dark) 0%, var(--dn-calc-primary) 100%); color: var(--dn-calc-white); padding: var(--dn-calc-spacing-4xl) 0; text-align: center; animation: dn-calc-fadeInUp 0.8s ease 1s both; } .dn-calc-cta__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--dn-calc-spacing-lg); } .dn-calc-cta__text { font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-calc-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.8; } .dn-calc-cta__phone { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-top: var(--dn-calc-spacing-lg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .dn-calc-container { padding: 0 var(--dn-calc-spacing-md); } .dn-calc-hero, .dn-calc-stats, .dn-calc-pricing, .dn-calc-cta { padding: var(--dn-calc-spacing-2xl) 0; } .dn-calc-form { padding: var(--dn-calc-spacing-lg); } .dn-calc-form__radio-group, .dn-calc-form__checkbox-group { grid-template-columns: 1fr; } .dn-calc-stats__grid { grid-template-columns: repeat(2, 1fr); } .dn-calc-pricing__grid { grid-template-columns: 1fr; } .dn-calc-table { font-size: 0.875rem; } .dn-calc-table th, .dn-calc-table td { padding: var(--dn-calc-spacing-sm); } } @media (max-width: 480px) { .dn-calc-stats__grid { grid-template-columns: 1fr; } .dn-calc-btn { width: 100%; padding: var(--dn-calc-spacing-md) var(--dn-calc-spacing-lg); } } :root { --hub-primary: #194A9A; --hub-secondary: #2F62AD; --hub-blue: #348EDF; --hub-accent: #DF4756; --hub-dark: #011F4E; --hub-black: #000000; --hub-white: #ffffff; --hub-gray-50: #f9fafb; --hub-gray-100: #f3f4f6; --hub-gray-200: #e5e7eb; --hub-gray-300: #d1d5db; --hub-gray-500: #6b7280; --hub-gray-600: #4b5563; --hub-gray-700: #374151; --hub-gray-800: #1f2937; --hub-spacing-xs: 4px; --hub-spacing-sm: 8px; --hub-spacing-md: 16px; --hub-spacing-lg: 24px; --hub-spacing-xl: 32px; --hub-spacing-2xl: 48px; --hub-spacing-3xl: 64px; --hub-spacing-4xl: 96px; --hub-radius: 14px; --hub-radius-sm: 8px; --hub-radius-lg: 20px; --hub-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --hub-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --hub-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); --hub-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes hubFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hub_article { background: var(--hub-white); min-height: 100vh; } .hub_header { background: linear-gradient(135deg, var(--hub-dark) 0%, var(--hub-primary) 100%); padding: var(--hub-spacing-4xl) var(--hub-spacing-lg); color: var(--hub-white); position: relative; overflow: hidden; } .hub_header::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .hub_header__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--hub-spacing-lg); animation: hubFadeInUp 0.8s ease; } .hub_header__meta { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; margin-bottom: var(--hub-spacing-lg); animation: hubFadeInUp 0.8s ease 0.1s both; } .hub_header__summary { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--hub-radius); padding: var(--hub-spacing-xl); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; animation: hubFadeInUp 0.8s ease 0.2s both; } .hub_content { background: var(--hub-gray-50); padding: var(--hub-spacing-3xl) var(--hub-spacing-lg); } .hub_section { background: var(--hub-white); border-radius: var(--hub-radius); padding: var(--hub-spacing-2xl); margin-bottom: var(--hub-spacing-xl); box-shadow: var(--hub-shadow); animation: hubFadeInUp 0.8s ease; } .hub_section--intro { background: linear-gradient(135deg, var(--hub-gray-50) 0%, var(--hub-white) 100%); border-left: 4px solid var(--hub-primary); } .hub_lead { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 500; line-height: 1.6; color: var(--hub-gray-700); margin-bottom: var(--hub-spacing-lg); } .hub_section p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--hub-gray-700); margin-bottom: var(--hub-spacing-lg); } .hub_section__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: var(--hub-dark); margin-bottom: var(--hub-spacing-xl); padding-bottom: var(--hub-spacing-md); border-bottom: 2px solid var(--hub-gray-200); } .hub_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--hub-primary); margin: var(--hub-spacing-xl) 0 var(--hub-spacing-lg); } .hub_card { background: var(--hub-gray-50); border-radius: var(--hub-radius); padding: var(--hub-spacing-xl); margin: var(--hub-spacing-xl) 0; border: 1px solid var(--hub-gray-200); transition: all var(--hub-transition); } .hub_card:hover { box-shadow: var(--hub-shadow-lg); transform: translateY(-2px); } .hub_card--structure { background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%); border: 2px solid var(--hub-blue); } .hub_card--highlight { background: var(--hub-gray-50); border-left: 4px solid var(--hub-primary); } .hub_card--intent { background: #fff9f0; border: 1px solid #ffc107; } .hub_card--architecture { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); } .hub_card--warning { background: #ffebee; border-left: 5px solid var(--hub-accent); } .hub_card--ai { background: #f3e5f5; border: 2px solid #9c27b0; } .hub_card__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 600; color: var(--hub-primary); margin-bottom: var(--hub-spacing-lg); } .hub_card__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--hub-dark); margin-bottom: var(--hub-spacing-lg); } .hub_list { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--hub-spacing-lg); } .hub_list li { position: relative; padding-left: var(--hub-spacing-lg); margin-bottom: var(--hub-spacing-sm); } .hub_list li::before { content: '•'; position: absolute; left: 0; color: var(--hub-primary); font-weight: bold; } .hub_list--numbered { counter-reset: hub-counter; } .hub_list--numbered li::before { counter-increment: hub-counter; content: counter(hub-counter) '.'; } .hub_list--icons li::before { content: none; } .hub_list--icons li { padding-left: 0; } .hub_grid { display: grid; gap: var(--hub-spacing-lg); margin: var(--hub-spacing-xl) 0; } .hub_grid--topics { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .hub_topic { background: var(--hub-white); padding: var(--hub-spacing-lg); border-radius: var(--hub-radius); box-shadow: var(--hub-shadow); border-top: 4px solid; transition: all var(--hub-transition); } .hub_topic:hover { transform: translateY(-4px); box-shadow: var(--hub-shadow-lg); } .hub_topic--injury { border-top-color: #4caf50; } .hub_topic--family { border-top-color: var(--hub-blue); } .hub_topic--criminal { border-top-color: #ff9800; } .hub_topic--estate { border-top-color: #9c27b0; } .hub_topic__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; margin-bottom: var(--hub-spacing-sm); } .hub_topic--injury .hub_topic__title { color: #2e7d32; } .hub_topic--family .hub_topic__title { color: #1565c0; } .hub_topic--criminal .hub_topic__title { color: #e65100; } .hub_topic--estate .hub_topic__title { color: #6a1b9a; } .hub_topic__text { font-size: clamp(0.875rem, 1.3vw, 1rem); color: var(--hub-gray-600); } .hub_stats { background: var(--hub-gray-100); padding: var(--hub-spacing-lg); border-radius: var(--hub-radius); margin: var(--hub-spacing-xl) 0; } .hub_stats__item { margin-bottom: var(--hub-spacing-sm); color: var(--hub-gray-700); } .hub_results { background: #e8f5e9; border-left: 5px solid #4caf50; padding: var(--hub-spacing-xl); border-radius: var(--hub-radius); margin: var(--hub-spacing-xl) 0; } .hub_results__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); color: #2e7d32; margin-bottom: var(--hub-spacing-lg); } .hub_timeline { display: grid; gap: var(--hub-spacing-lg); margin: var(--hub-spacing-xl) 0; } .hub_timeline__item { background: var(--hub-white); border: 2px solid var(--hub-gray-200); border-radius: var(--hub-radius); padding: var(--hub-spacing-xl); transition: all var(--hub-transition); } .hub_timeline__item:hover { box-shadow: var(--hub-shadow-lg); transform: translateX(4px); } .hub_timeline__item--research { border-color: var(--hub-dark); } .hub_timeline__item--creation { border-color: var(--hub-secondary); } .hub_timeline__item--rollout { border-color: #4caf50; } .hub_timeline__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 600; margin-bottom: var(--hub-spacing-lg); } .hub_timeline__item--research .hub_timeline__title { color: var(--hub-dark); } .hub_timeline__item--creation .hub_timeline__title { color: var(--hub-secondary); } .hub_timeline__item--rollout .hub_timeline__title { color: #2e7d32; } .hub_table-wrapper { overflow-x: auto; margin: var(--hub-spacing-xl) 0; } .hub_table { width: 100%; border-collapse: collapse; background: var(--hub-white); box-shadow: var(--hub-shadow-lg); border-radius: var(--hub-radius); overflow: hidden; } .hub_table thead { background: linear-gradient(135deg, var(--hub-dark) 0%, var(--hub-primary) 100%); } .hub_table th { padding: var(--hub-spacing-lg); text-align: left; color: var(--hub-white); font-weight: 600; } .hub_table tbody tr { border-bottom: 1px solid var(--hub-gray-200); transition: background var(--hub-transition); } .hub_table tbody tr:hover { background: var(--hub-gray-50); } .hub_table tbody tr:nth-child(even) { background: var(--hub-gray-50); } .hub_table td { padding: var(--hub-spacing-lg); color: var(--hub-gray-700); } .hub_cta { background: linear-gradient(135deg, var(--hub-dark) 0%, var(--hub-primary) 100%); color: var(--hub-white); padding: var(--hub-spacing-2xl); border-radius: var(--hub-radius); margin: var(--hub-spacing-xl) 0; } .hub_cta--action { position: relative; overflow: hidden; } .hub_cta--action::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); pointer-events: none; } .hub_cta__title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--hub-spacing-xl); } .hub_final-cta { background: linear-gradient(135deg, #f0f8ff 0%, var(--hub-gray-50) 100%); border: 3px solid var(--hub-dark); border-radius: var(--hub-radius); padding: var(--hub-spacing-2xl); margin: var(--hub-spacing-3xl) 0; text-align: center; } .hub_final-cta__title { font-size: clamp(1.5rem, 2.5vw, 1.875rem); color: var(--hub-dark); margin-bottom: var(--hub-spacing-lg); } .hub_final-cta__text { font-size: clamp(1.125rem, 1.8vw, 1.25rem); margin-bottom: var(--hub-spacing-lg); color: var(--hub-gray-700); } .hub_final-cta__offer { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--hub-spacing-xl); color: var(--hub-gray-700); } .hub_final-cta__contact { background: var(--hub-white); padding: var(--hub-spacing-lg); border-radius: var(--hub-radius-sm); display: inline-block; } .hub_final-cta__phone { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: bold; color: var(--hub-dark); margin-bottom: var(--hub-spacing-sm); } .hub_final-cta__company { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--hub-gray-600); } .hub_author { background: var(--hub-gray-100); padding: var(--hub-spacing-xl); border-radius: var(--hub-radius); margin-top: var(--hub-spacing-3xl); } .hub_author__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--hub-dark); margin-bottom: var(--hub-spacing-md); } .hub_author__bio { line-height: 1.8; color: var(--hub-gray-700); } @media (max-width: 768px) { .hub_content { padding: var(--hub-spacing-xl) var(--hub-spacing-md); } .hub_section { padding: var(--hub-spacing-lg); } .hub_table { font-size: 0.875rem; } .hub_table th, .hub_table td { padding: var(--hub-spacing-md); } .hub_grid--topics { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --geo-primary: #194A9A; --geo-secondary: #2F62AD; --geo-blue: #348EDF; --geo-accent: #DF4756; --geo-dark: #011F4E; --geo-black: #000000; --geo-white: #ffffff; --geo-gray-50: #f8f9fa; --geo-gray-100: #e9ecef; --geo-gray-200: #dee2e6; --geo-gray-300: #ced4da; --geo-gray-600: #6c757d; --geo-gray-700: #495057; --geo-spacing-xs: 4px; --geo-spacing-sm: 8px; --geo-spacing-md: 16px; --geo-spacing-lg: 24px; --geo-spacing-xl: 32px; --geo-spacing-2xl: 48px; --geo-spacing-3xl: 64px; --geo-spacing-4xl: 96px; --geo-radius: 14px; --geo-radius-sm: 8px; --geo-radius-lg: 20px; --geo-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --geo-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --geo-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --geo-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes geoFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn_geo-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--geo-black); background: var(--geo-white); } .dn_geo-meta { background: var(--geo-gray-50); border-bottom: 1px solid var(--geo-gray-200); padding: var(--geo-spacing-md) 0; } .dn_geo-meta__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--geo-spacing-lg); text-align: center; } .dn_geo-meta__info { color: var(--geo-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); margin: var(--geo-spacing-xs) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--geo-spacing-lg); } .dn_geo-meta__category { color: var(--geo-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); margin: var(--geo-spacing-xs) 0; } .dn_geo-hero { background: linear-gradient(135deg, var(--geo-dark) 0%, var(--geo-primary) 100%); padding: var(--geo-spacing-4xl) var(--geo-spacing-lg); position: relative; overflow: hidden; } .dn_geo-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .dn_geo-hero__container { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 1; animation: geoFadeInUp 0.8s ease; } .dn_geo-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: var(--geo-white); margin-bottom: var(--geo-spacing-lg); line-height: 1.2; } .dn_geo-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--geo-white); max-width: 800px; margin: 0 auto var(--geo-spacing-2xl); opacity: 0.95; line-height: 1.6; } .dn_geo-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--geo-spacing-lg); max-width: 600px; margin: 0 auto; } .dn_geo-hero__stat { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: var(--geo-transition); } .dn_geo-hero__stat:hover { transform: translateY(-5px); background: rgba(255,255,255,0.15); } .dn_geo-hero__stat-value { display: block; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; color: var(--geo-white); margin-bottom: var(--geo-spacing-xs); } .dn_geo-hero__stat-label { display: block; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--geo-white); opacity: 0.9; } .dn_geo-content { background: var(--geo-gray-50); padding: var(--geo-spacing-3xl) 0; } .dn_geo-content__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--geo-spacing-lg); } .dn_geo-section { background: var(--geo-white); border-radius: var(--geo-radius); padding: var(--geo-spacing-2xl); margin-bottom: var(--geo-spacing-2xl); box-shadow: var(--geo-shadow-sm); animation: geoFadeInUp 0.8s ease; animation-fill-mode: both; } .dn_geo-section:nth-child(1) { animation-delay: 0.1s; } .dn_geo-section:nth-child(2) { animation-delay: 0.2s; } .dn_geo-section:nth-child(3) { animation-delay: 0.3s; } .dn_geo-section:nth-child(4) { animation-delay: 0.4s; } .dn_geo-section:nth-child(5) { animation-delay: 0.5s; } .dn_geo-section:nth-child(6) { animation-delay: 0.6s; } .dn_geo-section__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; margin-bottom: var(--geo-spacing-lg); color: var(--geo-gray-700); } .dn_geo-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--geo-dark); margin-bottom: var(--geo-spacing-xl); padding-bottom: var(--geo-spacing-md); border-bottom: 3px solid var(--geo-blue); font-weight: 700; } .dn_geo-section__number { color: var(--geo-blue); } .dn_geo-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--geo-primary); margin: var(--geo-spacing-xl) 0 var(--geo-spacing-lg); font-weight: 600; } .dn_geo-section p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--geo-gray-700); margin-bottom: var(--geo-spacing-lg); } .dn_geo-insight { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); border-left: 4px solid var(--geo-blue); border-radius: var(--geo-radius); padding: var(--geo-spacing-lg); margin: var(--geo-spacing-xl) 0; } .dn_geo-insight__label { color: var(--geo-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; display: block; margin-bottom: var(--geo-spacing-sm); } .dn_geo-insight__text { margin: 0; color: var(--geo-gray-700); line-height: 1.8; } .dn_geo-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--geo-spacing-lg); margin: var(--geo-spacing-xl) 0; } .dn_geo-comparison__card { padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: var(--geo-transition); } .dn_geo-comparison__card--negative { background: #FFF5F5; border: 2px solid var(--geo-accent); } .dn_geo-comparison__card--positive { background: #F0F9FF; border: 2px solid var(--geo-blue); } .dn_geo-comparison__card:hover { transform: translateY(-5px); box-shadow: var(--geo-shadow-md); } .dn_geo-comparison__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-comparison__card--negative .dn_geo-comparison__title { color: var(--geo-accent); } .dn_geo-comparison__card--positive .dn_geo-comparison__title { color: var(--geo-primary); } .dn_geo-comparison__list { list-style: none; padding: 0; line-height: 2; color: var(--geo-gray-700); } .dn_geo-highlight { background: var(--geo-gray-50); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .dn_geo-highlight__title { color: var(--geo-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-highlight__list { list-style: none; padding: 0; line-height: 2; color: var(--geo-gray-700); } .dn_geo-framework { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .dn_geo-framework__title { color: var(--geo-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-framework__level { background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); margin-bottom: var(--geo-spacing-md); } .dn_geo-framework__label { color: var(--geo-primary); display: block; margin-bottom: var(--geo-spacing-sm); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_geo-framework__level p { margin: var(--geo-spacing-xs) 0 var(--geo-spacing-md); color: var(--geo-gray-600); } .dn_geo-code { background: var(--geo-gray-50); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); display: block; font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.25vw, 1rem); overflow-x: auto; white-space: pre; color: var(--geo-dark); } .dn_geo-aero { background: #FFF9E6; padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .dn_geo-aero__item { background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); margin-bottom: var(--geo-spacing-md); } .dn_geo-aero__title { color: var(--geo-accent); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-sm); font-weight: 600; } .dn_geo-aero__desc { color: var(--geo-gray-600); margin-bottom: var(--geo-spacing-md); } .dn_geo-aero__example { background: var(--geo-gray-50); padding: var(--geo-spacing-md); border-radius: var(--geo-radius-sm); color: var(--geo-gray-700); font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_geo-tiers { display: grid; gap: var(--geo-spacing-lg); margin: var(--geo-spacing-xl) 0; } .dn_geo-tier { padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); transition: var(--geo-transition); } .dn_geo-tier--primary { background: #F9FBE7; } .dn_geo-tier--secondary { background: #E8EAF6; } .dn_geo-tier--tertiary { background: #FCE4EC; } .dn_geo-tier:hover { transform: translateY(-5px); box-shadow: var(--geo-shadow-md); } .dn_geo-tier__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-tier--primary .dn_geo-tier__title { color: #827717; } .dn_geo-tier--secondary .dn_geo-tier__title { color: #283593; } .dn_geo-tier--tertiary .dn_geo-tier__title { color: #880E4F; } .dn_geo-tier__list { list-style: none; padding: 0; margin: 0 0 var(--geo-spacing-md); line-height: 1.8; color: var(--geo-gray-600); } .dn_geo-tier__impact { background: var(--geo-white); padding: var(--geo-spacing-sm); border-radius: var(--geo-radius-sm); text-align: center; color: var(--geo-gray-700); } .dn_geo-timeline { background: linear-gradient(to right, #E8F5E9, #C8E6C9); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin: var(--geo-spacing-xl) 0; } .dn_geo-timeline__phase { margin-bottom: var(--geo-spacing-2xl); } .dn_geo-timeline__phase:last-child { margin-bottom: 0; } .dn_geo-timeline__title { color: #1B5E20; font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--geo-spacing-lg); font-weight: 600; } .dn_geo-timeline__step { background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); margin-bottom: var(--geo-spacing-md); } .dn_geo-timeline__step-title { color: var(--geo-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-timeline__list { list-style: none; padding: 0; line-height: 1.8; color: var(--geo-gray-600); } .dn_geo-faq { margin: var(--geo-spacing-xl) 0; } .dn_geo-faq__item { background: var(--geo-gray-50); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-lg); transition: var(--geo-transition); } .dn_geo-faq__item:hover { transform: translateX(5px); box-shadow: var(--geo-shadow-sm); } .dn_geo-faq__question { color: var(--geo-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--geo-spacing-md); font-weight: 600; } .dn_geo-faq__answer { background: var(--geo-white); padding: var(--geo-spacing-lg); border-radius: var(--geo-radius-sm); } .dn_geo-faq__answer p { margin: 0; line-height: 1.8; color: var(--geo-gray-700); } .dn_geo-cta { background: linear-gradient(135deg, var(--geo-primary) 0%, var(--geo-secondary) 100%); padding: var(--geo-spacing-4xl) var(--geo-spacing-lg); margin-top: var(--geo-spacing-3xl); position: relative; overflow: hidden; } .dn_geo-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none; } .dn_geo-cta__container { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .dn_geo-cta__title { font-size: clamp(2rem, 4vw, 2.5rem); color: var(--geo-white); margin-bottom: var(--geo-spacing-md); font-weight: 700; } .dn_geo-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--geo-white); margin-bottom: var(--geo-spacing-xl); opacity: 0.95; } .dn_geo-cta__offer { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--geo-spacing-xl); border-radius: var(--geo-radius); margin-bottom: var(--geo-spacing-xl); } .dn_geo-cta__offer-title { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--geo-white); margin-bottom: var(--geo-spacing-lg); } .dn_geo-cta__list { list-style: none; padding: 0; text-align: left; max-width: 500px; margin: 0 auto; line-height: 2; color: var(--geo-white); } .dn_geo-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--geo-spacing-md); justify-content: center; margin-bottom: var(--geo-spacing-lg); } .dn_btn--large { padding: var(--geo-spacing-md) var(--geo-spacing-xl); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; border-radius: var(--geo-radius); text-decoration: none; display: inline-block; transition: var(--geo-transition); border: 2px solid transparent; } .dn_btn--primary { background: var(--geo-accent); color: var(--geo-white); } .dn_btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--geo-shadow-md); } .dn_btn--secondary { background: transparent; color: var(--geo-white); border-color: var(--geo-white); } .dn_btn--secondary:hover { background: var(--geo-white); color: var(--geo-primary); } .dn_btn--primary:focus-visible, .dn_btn--secondary:focus-visible { outline: 3px solid var(--geo-blue); outline-offset: 3px; } .dn_geo-cta__note { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--geo-white); opacity: 0.9; } @media (max-width: 768px) { .dn_geo-section { padding: var(--geo-spacing-lg); } .dn_geo-comparison, .dn_geo-hero__stats { grid-template-columns: 1fr; } .dn_geo-cta__buttons { flex-direction: column; align-items: center; } .dn_btn--large { width: 100%; max-width: 300px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --gmb-primary: #194A9A; --gmb-secondary: #2F62AD; --gmb-blue: #348EDF; --gmb-accent: #DF4756; --gmb-dark: #011F4E; --gmb-black: #000000; --gmb-white: #FFFFFF; --gmb-gray-50: #F9FAFB; --gmb-gray-100: #F3F4F6; --gmb-gray-200: #E5E7EB; --gmb-gray-600: #4B5563; --gmb-gray-700: #374151; --gmb-spacing-xs: 4px; --gmb-spacing-sm: 8px; --gmb-spacing-md: 16px; --gmb-spacing-lg: 24px; --gmb-spacing-xl: 32px; --gmb-spacing-2xl: 48px; --gmb-spacing-3xl: 64px; --gmb-spacing-4xl: 96px; --gmb-radius: 14px; --gmb-radius-sm: 8px; --gmb-radius-lg: 20px; --gmb-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --gmb-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --gmb-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --gmb-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } .dn_gmb-article { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--gmb-gray-700); background: var(--gmb-white); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_gmb-meta { background: var(--gmb-gray-50); padding: var(--gmb-spacing-md) 0; border-bottom: 1px solid var(--gmb-gray-200); text-align: center; } .dn_gmb-meta__info { display: flex; justify-content: center; align-items: center; gap: var(--gmb-spacing-lg); flex-wrap: wrap; color: var(--gmb-gray-600); font-size: 0.95rem; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-meta__category { color: var(--gmb-gray-600); font-size: 0.875rem; margin: 0; } .dn_gmb-hero { background: linear-gradient(135deg, var(--gmb-primary) 0%, var(--gmb-blue) 100%); color: var(--gmb-white); padding: var(--gmb-spacing-4xl) var(--gmb-spacing-lg); text-align: center; position: relative; overflow: hidden; } .dn_gmb-hero::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_gmb-hero__title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--gmb-spacing-lg); max-width: 1200px; margin-left: auto; margin-right: auto; animation: fadeInUp 0.6s ease; } .dn_gmb-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; max-width: 900px; margin: 0 auto var(--gmb-spacing-2xl); opacity: 0.95; animation: fadeInUp 0.8s ease; } .dn_gmb-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gmb-spacing-lg); max-width: 600px; margin: 0 auto; animation: fadeInUp 1s ease; } .dn_gmb-hero__stat { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: var(--gmb-spacing-lg); border-radius: var(--gmb-radius); transition: var(--gmb-transition); } .dn_gmb-hero__stat:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); } .dn_gmb-hero__stat-value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-hero__stat-label { font-size: 0.9rem; opacity: 0.9; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gmb-spacing-lg); position: relative; z-index: 1; } .dn_gmb-section { padding: var(--gmb-spacing-3xl) 0; animation: fadeInUp 0.6s ease; } .dn_gmb-section--intro { background: var(--gmb-gray-50); } .dn_gmb-content { max-width: 900px; margin: 0 auto; } .dn_gmb-content p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--gmb-spacing-lg); color: var(--gmb-gray-700); } .dn_gmb-lead { font-size: clamp(1.125rem, 2vw, 1.25rem) !important; font-weight: 500; color: var(--gmb-dark) !important; } .dn_gmb-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--gmb-dark); margin-bottom: var(--gmb-spacing-xl); border-bottom: 3px solid var(--gmb-blue); padding-bottom: var(--gmb-spacing-md); display: flex; align-items: center; gap: var(--gmb-spacing-md); } .dn_gmb-section__number { color: var(--gmb-blue); font-weight: 700; } .dn_gmb-subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--gmb-gray-700); margin: var(--gmb-spacing-xl) 0 var(--gmb-spacing-lg); font-weight: 600; } .dn_gmb-insight { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); padding: var(--gmb-spacing-lg); border-left: 4px solid var(--gmb-blue); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-insight__label { color: var(--gmb-primary); font-size: 1.125rem; display: block; margin-bottom: var(--gmb-spacing-sm); } .dn_gmb-process { background: var(--gmb-gray-50); padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-process__title { color: var(--gmb-primary); font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-process__steps { display: grid; gap: var(--gmb-spacing-md); } .dn_gmb-step { background: var(--gmb-white); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); border-left: 3px solid var(--gmb-blue); transition: var(--gmb-transition); } .dn_gmb-step:hover { transform: translateX(5px); box-shadow: var(--gmb-shadow-sm); } .dn_gmb-step__title { color: var(--gmb-primary); display: block; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-step__desc { color: var(--gmb-gray-600); font-size: 0.95rem; margin: 0; } .dn_gmb-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gmb-spacing-lg); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-comparison__card { padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); transition: var(--gmb-transition); } .dn_gmb-comparison__card--negative { background: #FFF5F5; border: 2px solid var(--gmb-accent); } .dn_gmb-comparison__card--positive { background: #E8F5E9; border: 2px solid var(--gmb-blue); } .dn_gmb-comparison__card:hover { transform: translateY(-5px); box-shadow: var(--gmb-shadow-md); } .dn_gmb-comparison__title { font-size: 1.25rem; margin-bottom: var(--gmb-spacing-md); font-weight: 600; } .dn_gmb-comparison__card--negative .dn_gmb-comparison__title { color: var(--gmb-accent); } .dn_gmb-comparison__card--positive .dn_gmb-comparison__title { color: var(--gmb-primary); } .dn_gmb-comparison__list { list-style: none; padding: 0; margin: 0; } .dn_gmb-comparison__list li { padding: var(--gmb-spacing-sm) 0; color: var(--gmb-gray-700); line-height: 1.6; } .dn_gmb-framework { background: #E3F2FD; padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-framework__title { color: var(--gmb-primary); font-size: 1.25rem; margin-bottom: var(--gmb-spacing-md); } .dn_gmb-framework__content { background: var(--gmb-white); padding: var(--gmb-spacing-lg); border-radius: var(--gmb-radius-sm); margin-bottom: var(--gmb-spacing-md); } .dn_gmb-framework__label { color: var(--gmb-primary); display: block; font-size: 1.125rem; margin-bottom: var(--gmb-spacing-md); } .dn_gmb-framework__item { margin-bottom: var(--gmb-spacing-md); padding: var(--gmb-spacing-sm) 0; } .dn_gmb-framework__item strong { color: var(--gmb-dark); display: block; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-framework__item p { color: var(--gmb-gray-600); margin: 0; font-size: 0.95rem; } .dn_gmb-tip { background: #FFFDE7; padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); border-left: 3px solid #FFC107; } .dn_gmb-tip__label { color: #F57C00; display: block; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-tip p { color: var(--gmb-gray-600); margin: 0; font-size: 0.95rem; } .dn_gmb-categories { background: var(--gmb-gray-50); padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-categories__title { color: var(--gmb-dark); font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-categories__grid { display: grid; gap: var(--gmb-spacing-md); } .dn_gmb-category { background: var(--gmb-white); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); border-left: 3px solid var(--gmb-blue); } .dn_gmb-category strong { color: var(--gmb-dark); display: block; margin-bottom: var(--gmb-spacing-xs); } .dn_gmb-category__desc { color: var(--gmb-gray-600); font-size: 0.875rem; font-style: italic; margin-top: var(--gmb-spacing-xs); } .dn_gmb-category__list { list-style: none; padding: 0; margin: var(--gmb-spacing-sm) 0; } .dn_gmb-category__list li { color: var(--gmb-gray-600); padding: var(--gmb-spacing-xs) 0; } .dn_gmb-review-formula { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-review-formula__title { color: #E65100; font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-review-formula__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gmb-spacing-lg); } .dn_gmb-review-metric { background: var(--gmb-white); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); } .dn_gmb-review-metric strong { color: #E65100; display: block; margin-bottom: var(--gmb-spacing-sm); } .dn_gmb-review-metric ul { list-style: none; padding: 0; margin: 0; } .dn_gmb-review-metric li { color: var(--gmb-gray-600); padding: var(--gmb-spacing-xs) 0; } .dn_gmb-review-elements { background: var(--gmb-white); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); margin-top: var(--gmb-spacing-lg); } .dn_gmb-review-elements strong { color: #E65100; display: block; margin-bottom: var(--gmb-spacing-sm); } .dn_gmb-review-checklist { background: var(--gmb-gray-50); padding: var(--gmb-spacing-sm); border-radius: var(--gmb-radius-sm); margin-top: var(--gmb-spacing-sm); } .dn_gmb-review-checklist p { margin: var(--gmb-spacing-xs) 0; color: var(--gmb-gray-600); font-size: 0.95rem; } .dn_gmb-response { background: #E8F5E9; padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-response__title { color: #2E7D32; font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-response__content { background: var(--gmb-white); padding: var(--gmb-spacing-lg); border-radius: var(--gmb-radius-sm); } .dn_gmb-response__content strong { color: #2E7D32; display: block; margin-bottom: var(--gmb-spacing-md); } .dn_gmb-response__template { background: var(--gmb-gray-50); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); margin: var(--gmb-spacing-md) 0; font-style: italic; } .dn_gmb-response__template p { margin: var(--gmb-spacing-sm) 0; color: var(--gmb-gray-700); font-size: 0.95rem; } .dn_gmb-response__explanation { margin-top: var(--gmb-spacing-md); color: var(--gmb-gray-600); font-size: 0.95rem; } .dn_gmb-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gmb-spacing-lg); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-post-card { padding: var(--gmb-spacing-lg); border-radius: var(--gmb-radius); transition: var(--gmb-transition); } .dn_gmb-post-card--results { background: #FCE4EC; border-left: 4px solid #C2185B; } .dn_gmb-post-card--tips { background: #E8EAF6; border-left: 4px solid #5E35B1; } .dn_gmb-post-card--updates { background: #E0F2F1; border-left: 4px solid #00796B; } .dn_gmb-post-card--community { background: #FFF3E0; border-left: 4px solid #EF6C00; } .dn_gmb-post-card:hover { transform: translateY(-5px); box-shadow: var(--gmb-shadow-md); } .dn_gmb-post-card__title { font-size: 1.125rem; margin-bottom: var(--gmb-spacing-sm); font-weight: 600; } .dn_gmb-post-card--results .dn_gmb-post-card__title { color: #C2185B; } .dn_gmb-post-card--tips .dn_gmb-post-card__title { color: #5E35B1; } .dn_gmb-post-card--updates .dn_gmb-post-card__title { color: #00796B; } .dn_gmb-post-card--community .dn_gmb-post-card__title { color: #EF6C00; } .dn_gmb-post-card__desc { color: var(--gmb-gray-600); margin-bottom: var(--gmb-spacing-sm); } .dn_gmb-post-card__example { background: rgba(255, 255, 255, 0.7); padding: var(--gmb-spacing-sm); border-radius: var(--gmb-radius-sm); } .dn_gmb-post-card__example small { color: var(--gmb-gray-700); font-style: italic; } .dn_gmb-checklist-box { background: var(--gmb-gray-50); padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-checklist-box__title { color: var(--gmb-dark); font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gmb-spacing-lg); } .dn_gmb-checklist-grid strong { color: var(--gmb-dark); display: block; margin-bottom: var(--gmb-spacing-sm); } .dn_gmb-checklist-grid ul { list-style: none; padding: 0; } .dn_gmb-checklist-grid li { color: var(--gmb-gray-600); padding: var(--gmb-spacing-xs) 0; line-height: 1.6; } .dn_gmb-voice { background: #E3F2FD; padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(--gmb-spacing-xl) 0; } .dn_gmb-voice__title { color: var(--gmb-primary); font-size: 1.25rem; margin-bottom: var(--gmb-spacing-lg); } .dn_gmb-voice__queries { display: grid; gap: var(--gmb-spacing-md); } .dn_gmb-voice-query { background: var(--gmb-white); padding: var(--gmb-spacing-md); border-radius: var(--gmb-radius-sm); border-left: 3px solid var(--gmb-blue); } .dn_gmb-voice-query strong { color: var(--gmb-primary); display: block; margin-bottom: var(--gmb-spacing-sm); font-size: 1rem; } .dn_gmb-voice-query p { color: var(--gmb-gray-600); margin: 0; font-size: 0.95rem; } .dn_gmb-kpis { background: var(--gmb-gray-50); padding: var(--gmb-spacing-xl); border-radius: var(--gmb-radius); margin: var(-); } :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #FFFFFF; --llm-gray-50: #F9FAFB; --llm-gray-100: #F3F4F6; --llm-gray-200: #E5E7EB; --llm-gray-300: #D1D5DB; --llm-gray-500: #6B7280; --llm-gray-600: #4B5563; --llm-gray-700: #374151; --llm-gray-800: #1F2937; --llm-spacing-xs: 4px; --llm-spacing-sm: 8px; --llm-spacing-md: 16px; --llm-spacing-lg: 24px; --llm-spacing-xl: 32px; --llm-spacing-2xl: 48px; --llm-spacing-3xl: 64px; --llm-spacing-4xl: 96px; --llm-radius: 14px; --llm-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --llm-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --llm-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --llm-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes llmFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--llm-gray-800); background: var(--llm-white); } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--llm-spacing-lg); } .dn_container--narrow { max-width: 900px; } .dn_article-meta { background: var(--llm-gray-50); padding: var(--llm-spacing-md) 0; border-bottom: 1px solid var(--llm-gray-200); } .dn_meta-info { display: flex; flex-wrap: wrap; gap: var(--llm-spacing-lg); justify-content: center; margin-bottom: var(--llm-spacing-sm); } .dn_meta-date, .dn_meta-author, .dn_meta-time { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_meta-series { text-align: center; color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); margin: 0; } .dn_hero-section { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); padding: clamp(var(--llm-spacing-3xl), 8vw, var(--llm-spacing-4xl)) 0; animation: llmFadeInUp 0.6s ease; } .dn_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: var(--llm-white); margin-bottom: var(--llm-spacing-lg); line-height: 1.2; text-align: center; } .dn_hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--llm-white); opacity: 0.95; line-height: 1.5; text-align: center; max-width: 800px; margin: 0 auto; } .dn_quick-nav { background: #E8F4FD; padding: var(--llm-spacing-2xl) 0; animation: llmFadeInUp 0.7s ease; } .dn_nav-card { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); box-shadow: var(--llm-shadow-sm); } .dn_nav-card__title { color: var(--llm-primary); margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 2vw, 1.25rem); } .dn_nav-list { list-style: none; padding: 0; margin: 0; line-height: 2; } .dn_nav-list li { padding: var(--llm-spacing-xs) 0; } .dn_link { color: var(--llm-blue); text-decoration: none; font-weight: 600; transition: var(--llm-transition); } .dn_link:hover { color: var(--llm-primary); text-decoration: underline; } .dn_link:focus-visible { outline: 2px solid var(--llm-blue); outline-offset: 2px; border-radius: 4px; } .dn_link--inline { font-weight: 500; } .dn_link--cta { display: inline-block; margin-top: var(--llm-spacing-md); color: var(--llm-white); } .dn_main-content { background: var(--llm-gray-50); padding: var(--llm-spacing-3xl) 0; } .dn_content-section { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-2xl); margin-bottom: var(--llm-spacing-2xl); box-shadow: var(--llm-shadow-sm); animation: llmFadeInUp 0.8s ease; } @media (prefers-reduced-motion: no-preference) { .dn_content-section:nth-child(1) { animation-delay: 0.1s; } .dn_content-section:nth-child(2) { animation-delay: 0.2s; } .dn_content-section:nth-child(3) { animation-delay: 0.3s; } .dn_content-section:nth-child(4) { animation-delay: 0.4s; } .dn_content-section:nth-child(5) { animation-delay: 0.5s; } .dn_content-section:nth-child(6) { animation-delay: 0.6s; } .dn_content-section:nth-child(7) { animation-delay: 0.7s; } } @media (prefers-reduced-motion: reduce) { .dn_hero-section, .dn_quick-nav, .dn_content-section { animation: none; } } .dn_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); padding-bottom: var(--llm-spacing-md); border-bottom: 3px solid var(--llm-blue); font-weight: 700; } .dn_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--llm-gray-700); margin: var(--llm-spacing-xl) 0 var(--llm-spacing-lg); font-weight: 600; } .dn_section__lead { font-size: clamp(1.125rem, 1.8vw, 1.25rem); line-height: 1.7; color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-xl); } .dn_stats-card { background: #FFF9CC; border: 2px solid #FFC107; border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); margin: var(--llm-spacing-xl) 0; } .dn_stats-card__title { color: #856404; margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_stats-list { list-style: none; padding: 0; margin: 0; line-height: 1.8; } .dn_stats-list li { padding: var(--llm-spacing-xs) 0; } .dn_framework-card { border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin-bottom: var(--llm-spacing-lg); transition: var(--llm-transition); } .dn_framework-card:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .dn_framework-card--primary { background: linear-gradient(135deg, var(--llm-blue) 0%, var(--llm-secondary) 100%); color: var(--llm-white); } .dn_framework-card--secondary { background: #F0F4FF; border-left: 4px solid var(--llm-blue); } .dn_framework-card--success { background: #E8F5E9; border-left: 4px solid #4CAF50; } .dn_framework-card--warning { background: #FFF8E0; border-left: 4px solid #FF9800; } .dn_framework-card--accent { background: #FCE4EC; border-left: 4px solid var(--llm-accent); } .dn_framework-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-md); font-weight: 700; } .dn_framework-card--primary .dn_framework-card__title { color: var(--llm-white); } .dn_framework-card--secondary .dn_framework-card__title { color: var(--llm-blue); } .dn_framework-card--success .dn_framework-card__title { color: #2E7D32; } .dn_framework-card--warning .dn_framework-card__title { color: #E65100; } .dn_framework-card--accent .dn_framework-card__title { color: var(--llm-accent); } .dn_framework-card__desc { margin-bottom: var(--llm-spacing-lg); line-height: 1.6; } .dn_framework-card__content { background: rgba(255,255,255,0.15); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); } .dn_framework-card--primary .dn_framework-card__content { background: rgba(255,255,255,0.15); } .dn_framework-card--secondary .dn_framework-card__content, .dn_framework-card--success .dn_framework-card__content, .dn_framework-card--warning .dn_framework-card__content, .dn_framework-card--accent .dn_framework-card__content { background: var(--llm-white); } .dn_framework-card__content h4 { margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_framework-list { list-style: none; padding: 0; margin: 0; line-height: 2; } .dn_framework-list li { padding: var(--llm-spacing-sm) 0; } .dn_checklist { list-style: none; padding: 0; margin: 0; line-height: 2; } .dn_checklist li { padding: var(--llm-spacing-xs) 0; } .dn_code-block { background: #F8F9FA; border: 1px solid var(--llm-gray-300); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); overflow-x: auto; white-space: pre; line-height: 1.6; } .dn_code-block--dark { background: #2D2D2D; color: #F8F8F2; border: none; } .dn_format-card { background: var(--llm-gray-50); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-lg); } .dn_format-card--faq { background: linear-gradient(135deg, #28A745 0%, #20C997 100%); color: var(--llm-white); } .dn_format-card--table { background: #F0F4FF; } .dn_format-card--guide { background: #E8F5E9; } .dn_format-card__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); margin-bottom: var(--llm-spacing-md); font-weight: 700; } .dn_format-card--faq .dn_format-card__title { color: var(--llm-white); } .dn_format-card__content { background: rgba(255,255,255,0.15); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); } .dn_format-card--table .dn_format-card__content, .dn_format-card--guide .dn_format-card__content { background: var(--llm-white); } .dn_format-card__content h4 { margin-bottom: var(--llm-spacing-md); } .dn_table { width: 100%; background: var(--llm-white); border-collapse: collapse; overflow: hidden; } .dn_table thead { background: var(--llm-blue); color: var(--llm-white); } .dn_table th { padding: var(--llm-spacing-md); text-align: left; font-weight: 600; } .dn_table td { padding: var(--llm-spacing-md); border-bottom: 1px solid var(--llm-gray-200); } .dn_table tbody tr:hover { background: var(--llm-gray-50); transition: var(--llm-transition); } .dn_ordered-list { margin: 0; padding-left: var(--llm-spacing-lg); line-height: 2; } .dn_ordered-list li { padding: var(--llm-spacing-xs) 0; } .dn_formats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); margin-top: var(--llm-spacing-xl); } .dn_format-item { background: var(--llm-gray-50); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); border: 1px solid var(--llm-gray-200); } .dn_format-item--listicles { border-color: #FF0000; } .dn_format-item--cases { border-color: #6F42C1; } .dn_format-item--definitions { border-color: #004085; } .dn_format-item--tutorials { border-color: #856404; } .dn_format-item__title { color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; } .dn_format-item--listicles .dn_format-item__title { color: #DC3545; } .dn_format-item--cases .dn_format-item__title { color: #6F42C1; } .dn_format-item--definitions .dn_format-item__title { color: #004085; } .dn_format-item--tutorials .dn_format-item__title { color: #856404; } .dn_format-item__list { list-style: none; padding: 0; margin: 0; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.8; } .dn_format-item__list li { padding: var(--llm-spacing-xs) 0; } .dn_code-card { background: var(--llm-gray-800); color: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .dn_code-card__title { color: var(--llm-white); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_info-card { background: #F0F4FF; border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .dn_info-card__title { color: var(--llm-blue); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; } .dn_info-list { list-style: none; padding: 0; margin: 0; line-height: 2; } .dn_info-list li { padding: var(--llm-spacing-sm) 0; } .dn_checklist-card { background: #E8F5E9; border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .dn_checklist-card__title { color: #2E7D32; margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; } .dn_checklist-card__content { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); } .dn_checklist-section { margin-bottom: var(--llm-spacing-xl); } .dn_checklist-section:last-child { margin-bottom: 0; } .dn_checklist-section h4 { color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_industry-grid { display: grid; gap: var(--llm-spacing-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .dn_industry-card { background: var(--llm-gray-50); border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); border-left: 4px solid; transition: var(--llm-transition); } .dn_industry-card:hover { transform: translateX(4px); box-shadow: var(--llm-shadow-md); } .dn_industry-card--legal { border-color: var(--llm-blue); background: #F0F4FF; } .dn_industry-card--healthcare { border-color: #4CAF50; background: #E8F5E9; } .dn_industry-card--ecommerce { border-color: #FF9800; background: #FFF3E0; } .dn_industry-card__title { margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_industry-card--legal .dn_industry-card__title { color: var(--llm-blue); } .dn_industry-card--healthcare .dn_industry-card__title { color: #2E7D32; } .dn_industry-card--ecommerce .dn_industry-card__title { color: #E65100; } .dn_industry-list { list-style: none; padding: 0; margin: 0; line-height: 1.8; } .dn_industry-list li { padding: var(--llm-spacing-xs) 0; } .dn_testing-card { background: #2D2D2D; color: #F8F8F2; border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .dn_testing-card__title { color: var(--llm-white); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_cta-section { background: linear-gradient(135deg, var(--llm-blue) 0%, var(--llm-secondary) 100%); border-radius: var(--llm-radius); padding: var(--llm-spacing-3xl); margin: var(--llm-spacing-2xl) 0; } .dn_cta-container { color: var(--llm-white); } .dn_cta__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--llm-spacing-lg); text-align: center; font-weight: 700; } .dn_cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-xl); text-align: center; line-height: 1.6; } .dn_cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--llm-spacing-lg); } .dn_cta-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); transition: var(--llm-transition); } .dn_cta-card:hover { background: rgba(255,255,255,0.25); transform: translateY(-4px); } .dn_cta-card__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); margin-bottom: var(--llm-spacing-md); font-weight: 700; } .dn_cta-card__desc { margin-bottom: var(--llm-spacing-md); line-height: 1.6; } .dn_content-section--conclusion { background: var(--llm-gray-100); } .dn_conclusion-cta { background: #28A745; color: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); margin-top: var(--llm-spacing-xl); text-align: center; } .dn_conclusion-cta__text { margin: 0; font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.6; } @media (max-width: 768px) { .dn_container { padding: 0 var(--llm-spacing-md); } .dn_content-section { padding: var(--llm-spacing-lg); } .dn_formats-grid, .dn_industry-grid, .dn_cta-grid { grid-template-columns: 1fr; } .dn_table { font-size: 0.875rem; } .dn_table th, .dn_table td { padding: var(--llm-spacing-sm); } .dn_cta-section { padding: var(--llm-spacing-xl); } } @media (max-width: 480px) { .dn_meta-info { flex-direction: column; gap: var(--llm-spacing-sm); } .dn_framework-card, .dn_checklist-card, .dn_testing-card, .dn_code-card { padding: var(--llm-spacing-lg); } .dn_code-block { padding: var(--llm-spacing-md); font-size: 0.75rem; } } /* LLM Case Study - Custom Properties */ :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #ffffff; --llm-gray-50: #f9fafb; --llm-gray-100: #f3f4f6; --llm-gray-200: #e5e7eb; --llm-gray-300: #d1d5db; --llm-gray-600: #4b5563; --llm-gray-700: #374151; --llm-gray-800: #1f2937; --llm-success: #10b981; --llm-warning: #f59e0b; --llm-spacing-xs: 4px; --llm-spacing-sm: 8px; --llm-spacing-md: 16px; --llm-spacing-lg: 24px; --llm-spacing-xl: 32px; --llm-spacing-2xl: 48px; --llm-spacing-3xl: 64px; --llm-spacing-4xl: 96px; --llm-radius: 14px; --llm-radius-sm: 8px; --llm-radius-lg: 20px; --llm-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --llm-shadow: 0 4px 6px rgba(0,0,0,0.1); --llm-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --llm-shadow-xl: 0 20px 40px rgba(0,0,0,0.2); --llm-transition: 300ms ease; --llm-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --llm-font-mono: 'Courier New', Courier, monospace; } /* Animation */ @keyframes llmFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Base Wrapper */ .llm_wrapper { font-family: var(--llm-font-base); line-height: 1.6; color: var(--llm-gray-800); background: var(--llm-white); } /* Hero Section */ .llm_hero { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); padding: var(--llm-spacing-4xl) var(--llm-spacing-lg); color: var(--llm-white); animation: llmFadeInUp 0.8s ease; } .llm_hero__container { max-width: 1200px; margin: 0 auto; text-align: center; } .llm_hero__meta { display: flex; gap: var(--llm-spacing-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--llm-spacing-sm); font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .llm_hero__category { font-size: clamp(0.875rem, 1.5vw, 1rem); text-transform: uppercase; letter-spacing: 2px; color: var(--llm-blue); margin-bottom: var(--llm-spacing-xl); } .llm_hero__link { color: var(--llm-blue); text-decoration: none; transition: color var(--llm-transition); } .llm_hero__link:hover { color: var(--llm-white); text-decoration: underline; } .llm_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--llm-spacing-lg); } .llm_hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); line-height: 1.5; opacity: 0.95; max-width: 900px; margin: 0 auto; } /* Stats Section */ .llm_stats { background: var(--llm-gray-50); padding: var(--llm-spacing-3xl) var(--llm-spacing-lg); animation: llmFadeInUp 0.9s ease; } .llm_stats__container { max-width: 1200px; margin: 0 auto; } .llm_stats__title { font-size: clamp(1.75rem, 3vw, 2.5rem); text-align: center; margin-bottom: var(--llm-spacing-2xl); color: var(--llm-dark); } .llm_stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-xl); } .llm_stats__item { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); text-align: center; box-shadow: var(--llm-shadow); border-top: 4px solid var(--llm-blue); transition: transform var(--llm-transition); } .llm_stats__item:nth-child(2) { border-top-color: var(--llm-primary); } .llm_stats__item:nth-child(3) { border-top-color: var(--llm-success); } .llm_stats__item:nth-child(4) { border-top-color: var(--llm-secondary); } .llm_stats__item:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .llm_stats__value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--llm-dark); display: block; margin-bottom: var(--llm-spacing-sm); } .llm_stats__label { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } /* Main Content */ .llm_content { padding: var(--llm-spacing-3xl) var(--llm-spacing-lg); } .llm_content__container { max-width: 1200px; margin: 0 auto; } /* Sections */ .llm_section { background: var(--llm-white); padding: var(--llm-spacing-3xl); margin-bottom: var(--llm-spacing-3xl); border-radius: var(--llm-radius); box-shadow: var(--llm-shadow); animation: llmFadeInUp 1s ease; } .llm_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); padding-bottom: var(--llm-spacing-md); border-bottom: 3px solid var(--llm-blue); } .llm_section__intro { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-xl); } /* Challenge Section */ .llm_challenge__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--llm-primary); margin: var(--llm-spacing-xl) 0 var(--llm-spacing-lg); } .llm_challenge__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-lg); } .llm_challenge__emphasis { font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--llm-dark); margin: var(--llm-spacing-lg) 0; } /* Quote */ .llm_quote { background: var(--llm-gray-50); border-left: 4px solid var(--llm-accent); padding: var(--llm-spacing-lg); margin: var(--llm-spacing-xl) 0; border-radius: 0 var(--llm-radius) var(--llm-radius) 0; } .llm_quote__text { font-size: clamp(1.125rem, 2vw, 1.25rem); font-style: italic; color: var(--llm-dark); margin: 0; line-height: 1.6; } .llm_quote__author { display: block; text-align: right; margin-top: var(--llm-spacing-md); color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } /* Checklist */ .llm_checklist { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; list-style: none; } .llm_checklist__item { padding: var(--llm-spacing-sm) 0; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--llm-gray-700); } /* Code Block */ .llm_code { background: var(--llm-gray-800); color: var(--llm-gray-100); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm_code__title { color: var(--llm-white); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm_code__content { font-family: var(--llm-font-mono); font-size: clamp(0.875rem, 1.25vw, 1rem); line-height: 1.6; overflow-x: auto; color: var(--llm-gray-100); } /* Insight Box */ .llm_insight { background: linear-gradient(135deg, #fef3c7, #fde68a); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm_insight__text { color: var(--llm-dark); font-size: clamp(1rem, 1.5vw, 1.125rem); margin: 0; line-height: 1.6; } .llm_insight--secondary { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } /* Timeline */ .llm_timeline { display: grid; gap: var(--llm-spacing-xl); } .llm_timeline__phase { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-2xl); box-shadow: var(--llm-shadow); border-left: 5px solid; transition: transform var(--llm-transition); } .llm_timeline__phase--primary { background: linear-gradient(135deg, var(--llm-primary), var(--llm-secondary)); color: var(--llm-white); border-left-color: var(--llm-blue); } .llm_timeline__phase--secondary { background: var(--llm-gray-50); border-left-color: var(--llm-secondary); } .llm_timeline__phase--tertiary { background: var(--llm-gray-50); border-left-color: var(--llm-success); } .llm_timeline__phase:hover { transform: translateX(4px); } .llm_timeline__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-sm); color: inherit; } .llm_timeline__phase--secondary .llm_timeline__title, .llm_timeline__phase--tertiary .llm_timeline__title { color: var(--llm-dark); } .llm_timeline__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-lg); opacity: 0.9; } .llm_timeline__phase--secondary .llm_timeline__subtitle, .llm_timeline__phase--tertiary .llm_timeline__subtitle { color: var(--llm-gray-600); } .llm_timeline__content h4 { font-size: clamp(1.125rem, 1.75vw, 1.25rem); margin: var(--llm-spacing-lg) 0 var(--llm-spacing-md); color: inherit; } .llm_timeline__phase--secondary h4, .llm_timeline__phase--tertiary h4 { color: var(--llm-primary); } .llm_timeline__list { list-style: none; padding-left: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-lg); } .llm_timeline__list li { position: relative; padding: var(--llm-spacing-xs) 0; line-height: 1.6; } .llm_timeline__list li::before { content: '•'; position: absolute; left: calc(-1 * var(--llm-spacing-lg)); color: var(--llm-blue); font-weight: 700; } .llm_timeline__list--highlight { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin-top: var(--llm-spacing-lg); } .llm_timeline__result { background: var(--llm-gray-100); padding: var(--llm-spacing-md); border-radius: var(--llm-radius); margin-top: var(--llm-spacing-lg); text-align: center; } .llm_timeline__phase--primary .llm_timeline__result { background: rgba(255,255,255,0.2); } .llm_timeline__result--success { background: #dcfce7; color: var(--llm-success); font-weight: 600; } .llm_timeline__result--complete { background: var(--llm-success); color: var(--llm-white); font-weight: 700; } /* Citations Grid */ .llm_citations { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-md); margin: var(--llm-spacing-lg) 0; } .llm_citations__item { background: var(--llm-white); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); border-left: 3px solid var(--llm-blue); } .llm_citations__item strong { display: block; color: var(--llm-dark); margin-bottom: var(--llm-spacing-sm); } .llm_citations__item p { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.25vw, 1rem); margin: 0; } /* Results Section */ .llm_results__block { background: var(--llm-gray-50); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .llm_results__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--llm-dark); margin-bottom: var(--llm-spacing-lg); } /* Comparison */ .llm_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-lg); } .llm_comparison__column { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); } .llm_comparison__column--success { background: linear-gradient(135deg, #dcfce7, #bbf7d0); } .llm_comparison__column h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-md); } .llm_comparison__list { list-style: none; padding: 0; line-height: 2; } /* Metrics */ .llm_metrics { display: grid; gap: var(--llm-spacing-lg); } .llm_metrics__item { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); display: flex; justify-content: space-between; align-items: center; transition: transform var(--llm-transition); } .llm_metrics__item:hover { transform: translateX(4px); box-shadow: var(--llm-shadow); } .llm_metrics__header h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xs); font-size: clamp(1.125rem, 1.75vw, 1.25rem); } .llm_metrics__header p { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.25vw, 1rem); margin: 0; } .llm_metrics__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--llm-blue); } /* ROI Box */ .llm_roi { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); text-align: center; } .llm_roi__title { color: var(--llm-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); } .llm_roi__content { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); font-family: var(--llm-font-mono); } .llm_roi__content p { margin: var(--llm-spacing-sm) 0; color: var(--llm-gray-700); } .llm_roi__result { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--llm-success); font-weight: 700; margin-top: var(--llm-spacing-md); } /* Table */ .llm_table-wrapper { overflow-x: auto; margin: var(--llm-spacing-xl) 0; } .llm_table { width: 100%; border-collapse: collapse; background: var(--llm-white); border-radius: var(--llm-radius); overflow: hidden; box-shadow: var(--llm-shadow); } .llm_table thead { background: linear-gradient(135deg, var(--llm-dark), var(--llm-primary)); } .llm_table th { padding: var(--llm-spacing-md); color: var(--llm-white); text-align: left; font-weight: 600; font-size: clamp(0.875rem, 1.25vw, 1rem); } .llm_table tbody tr { border-bottom: 1px solid var(--llm-gray-200); } .llm_table tbody tr:nth-child(even) { background: var(--llm-gray-50); } .llm_table tbody tr:hover { background: #e0f2fe; } .llm_table td { padding: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.25vw, 1rem); } .llm_table__total { background: #dcfce7 !important; font-weight: 700; } /* Lessons */ .llm_lessons { display: grid; gap: var(--llm-spacing-lg); } .llm_lesson { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-left: 4px solid var(--llm-blue); border-radius: 0 var(--llm-radius) var(--llm-radius) 0; transition: transform var(--llm-transition); } .llm_lesson:nth-child(2) { border-left-color: var(--llm-primary); } .llm_lesson:nth-child(3) { border-left-color: var(--llm-warning); } .llm_lesson:nth-child(4) { border-left-color: var(--llm-accent); } .llm_lesson:nth-child(5) { border-left-color: var(--llm-success); } .llm_lesson:hover { transform: translateX(4px); box-shadow: var(--llm-shadow); } .llm_lesson h3 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-md); font-size: clamp(1.125rem, 1.75vw, 1.25rem); } .llm_lesson p { color: var(--llm-gray-700); margin: 0; line-height: 1.6; } /* Testimonial Section */ .llm_section--testimonial { background: linear-gradient(135deg, var(--llm-primary), var(--llm-secondary)); color: var(--llm-white); } .llm_section--testimonial .llm_section__title { color: var(--llm-white); border-bottom-color: rgba(255,255,255,0.3); } .llm_testimonial__text { font-size: clamp(1.125rem, 2vw, 1.375rem); font-style: italic; line-height: 1.8; margin-bottom: var(--llm-spacing-xl); opacity: 0.95; } .llm_testimonial__footer { text-align: right; } .llm_testimonial__footer strong { display: block; font-size: clamp(1.125rem, 1.75vw, 1.25rem); margin-bottom: var(--llm-spacing-xs); } .llm_testimonial__footer span { opacity: 0.9; font-size: clamp(1rem, 1.5vw, 1.125rem); } /* Framework */ .llm_framework { background: var(--llm-gray-50); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); } .llm_framework__title { color: var(--llm-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-xl); text-align: center; } .llm_framework__phases { display: grid; gap: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-xl); } .llm_framework__phase { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); border-left: 4px solid; } .llm_framework__phase--foundation { border-left-color: var(--llm-blue); } .llm_framework__phase--expansion { border-left-color: var(--llm-primary); } .llm_framework__phase--authority { border-left-color: var(--llm-success); } .llm_framework__phase h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-md); font-size: clamp(1.125rem, 1.75vw, 1.25rem); } .llm_framework__phase ul { list-style: none; padding: 0; line-height: 1.8; } .llm_framework__phase li { padding: var(--llm-spacing-xs) 0; padding-left: var(--llm-spacing-lg); position: relative; } .llm_framework__phase li::before { content: '•'; position: absolute; left: 0; color: var(--llm-gray-600); } .llm_framework__result { background: var(--llm-success); color: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); text-align: center; font-size: clamp(1rem, 1.5vw, 1.125rem); } /* CTA Section */ .llm_cta { background: linear-gradient(135deg, var(--llm-dark), var(--llm-primary)); padding: var(--llm-spacing-4xl) var(--llm-spacing-lg); color: var(--llm-white); text-align: center; animation: llmFadeInUp 1.1s ease; } .llm_cta__container { max-width: 1000px; margin: 0 auto; } .llm_cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--llm-spacing-lg); } .llm_cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--llm-spacing-2xl); opacity: 0.95; line-height: 1.5; } .llm_cta__box { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); } .llm_cta__box h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--llm-spacing-lg); } .llm_cta__box p { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-xl); opacity: 0.95; } .llm_cta__features { list-style: none; text-align: left; max-width: 600px; margin: 0 auto var(--llm-spacing-xl); padding: 0; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm_cta__features li { padding: var(--llm-spacing-xs) 0; } /* Footer */ .llm_footer { background: var(--llm-gray-100); padding: var(--llm-spacing-2xl) var(--llm-spacing-lg); } .llm_footer__container { max-width: 1200px; margin: 0 auto; text-align: center; } .llm_footer__title { color: var(--llm-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-md); } .llm_footer__text { color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-md); line-height: 1.6; } .llm_footer__meta { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.25vw, 1rem); } /* Focus and Hover States */ a:focus-visible, button:focus-visible { outline: 3px solid var(--llm-blue); outline-offset: 2px; } button:hover { opacity: 0.9; } button:active { transform: scale(0.98); } /* Responsive */ @media (max-width: 768px) { .llm_section { padding: var(--llm-spacing-xl); } .llm_stats__grid { grid-template-columns: 1fr 1fr; } .llm_timeline__phase, .llm_citations, .llm_comparison, .llm_framework__phases, .llm_lessons { grid-template-columns: 1fr; } .llm_metrics__item { flex-direction: column; text-align: center; } .llm_metrics__value { margin-top: var(--llm-spacing-md); } .llm_table { font-size: 0.875rem; } .llm_table th, .llm_table td { padding: var(--llm-spacing-sm); } } @media (max-width: 480px) { .llm_hero__meta { flex-direction: column; gap: var(--llm-spacing-sm); } .llm_stats__grid { grid-template-columns: 1fr; } .llm_section { padding: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-xl); } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-reduced-motion: no-preference) { .llm_section:nth-child(1) { animation-delay: 0.1s; } .llm_section:nth-child(2) { animation-delay: 0.2s; } .llm_section:nth-child(3) { animation-delay: 0.3s; } .llm_section:nth-child(4) { animation-delay: 0.4s; } .llm_section:nth-child(5) { animation-delay: 0.5s; } .llm_section:nth-child(6) { animation-delay: 0.6s; } .llm_section:nth-child(7) { animation-delay: 0.7s; } .llm_section:nth-child(8) { animation-delay: 0.8s; } } :root { --ee-primary: #194A9A; --ee-secondary: #2F62AD; --ee-blue: #348EDF; --ee-accent: #DF4756; --ee-dark: #011F4E; --ee-white: #FFFFFF; --ee-black: #000000; --ee-gray-50: #F9FAFB; --ee-gray-100: #F3F4F6; --ee-gray-200: #E5E7EB; --ee-gray-300: #D1D5DB; --ee-gray-600: #6B7280; --ee-gray-700: #4B5563; --ee-gray-800: #374151; --ee-spacing-xs: 4px; --ee-spacing-sm: 8px; --ee-spacing-md: 16px; --ee-spacing-lg: 24px; --ee-spacing-xl: 32px; --ee-spacing-2xl: 48px; --ee-spacing-3xl: 64px; --ee-radius: 14px; --ee-radius-sm: 8px; --ee-radius-lg: 20px; --ee-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --ee-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --ee-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --ee-transition: 300ms ease; } @keyframes dn_fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .dn_animate-fade { animation: dn_fadeIn 0.6s ease-out forwards; opacity: 0; } .dn_animate-fade:nth-child(1) { animation-delay: 0.1s; } .dn_animate-fade:nth-child(2) { animation-delay: 0.2s; } .dn_animate-fade:nth-child(3) { animation-delay: 0.3s; } .dn_animate-fade:nth-child(4) { animation-delay: 0.4s; } .dn_animate-fade:nth-child(5) { animation-delay: 0.5s; } } .dn_ee-nav { background: var(--ee-white); border-radius: var(--ee-radius); padding: var(--ee-spacing-xl); border-left: 4px solid var(--ee-primary); box-shadow: var(--ee-shadow-sm); } .dn_ee-nav__title { color: var(--ee-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--ee-spacing-lg); font-weight: 700; } .dn_ee-nav__list { list-style: none; padding: 0; margin: 0; } .dn_ee-nav__list li { padding: var(--ee-spacing-sm) 0; line-height: 1.6; } .dn_ee-highlight { background: #FFF9E6; border: 2px solid #FFD700; border-radius: var(--ee-radius); padding: var(--ee-spacing-xl); margin: var(--ee-spacing-2xl) 0; } .dn_ee-highlight__title { color: var(--ee-dark); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--ee-spacing-md); font-weight: 700; } .dn_ee-highlight__list { list-style: none; padding: 0; margin: 0; } .dn_ee-highlight__list li { padding: var(--ee-spacing-sm) 0; padding-left: var(--ee-spacing-lg); position: relative; } .dn_ee-highlight__list li::before { content: "•"; position: absolute; left: 0; color: var(--ee-accent); font-weight: bold; } .dn_ee-pillar { border-radius: var(--ee-radius); padding: var(--ee-spacing-2xl); margin-bottom: var(--ee-spacing-xl); box-shadow: var(--ee-shadow-md); transition: transform var(--ee-transition); } .dn_ee-pillar:hover { transform: translateY(-4px); box-shadow: var(--ee-shadow-lg); } .dn_ee-pillar--primary { background: linear-gradient(135deg, var(--ee-primary) 0%, var(--ee-secondary) 100%); color: var(--ee-white); } .dn_ee-pillar--secondary { background: var(--ee-gray-50); border-left: 4px solid var(--ee-primary); } .dn_ee-pillar--tertiary { background: #E8F5E9; border-left: 4px solid #4CAF50; } .dn_ee-pillar--quaternary { background: #FFF3E0; border-left: 4px solid #FF9800; } .dn_ee-pillar__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--ee-spacing-lg); font-weight: 700; } .dn_ee-pillar--primary .dn_ee-pillar__title { color: var(--ee-white); } .dn_ee-pillar__content { background: rgba(255, 255, 255, 0.15); padding: var(--ee-spacing-lg); border-radius: var(--ee-radius-sm); margin-bottom: var(--ee-spacing-lg); } .dn_ee-pillar--secondary .dn_ee-pillar__content, .dn_ee-pillar--tertiary .dn_ee-pillar__content, .dn_ee-pillar--quaternary .dn_ee-pillar__content { background: var(--ee-white); } .dn_ee-pillar__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--ee-spacing-md); font-weight: 600; } .dn_ee-pillar--primary .dn_ee-pillar__subtitle { color: var(--ee-white); } .dn_ee-pillar__list { list-style: none; padding: 0; margin: 0; line-height: 1.8; } .dn_ee-pillar__list li { padding: var(--ee-spacing-xs) 0; } .dn_ee-pillar__sublist { margin-top: var(--ee-spacing-sm); margin-left: var(--ee-spacing-lg); list-style: none; font-size: 0.95em; } .dn_ee-code { background: rgba(255, 255, 255, 0.15); padding: var(--ee-spacing-lg); border-radius: var(--ee-radius-sm); } .dn_ee-pillar--secondary .dn_ee-code, .dn_ee-pillar--tertiary .dn_ee-code, .dn_ee-pillar--quaternary .dn_ee-code { background: var(--ee-white); } .dn_ee-code__title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--ee-spacing-md); font-weight: 600; } .dn_ee-pillar--primary .dn_ee-code__title { color: var(--ee-white); } .dn_ee-code__block { background: #2D2D2D; color: #F8F8F2; padding: var(--ee-spacing-lg); border-radius: var(--ee-radius-sm); overflow-x: auto; font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1vw, 1rem); white-space: pre; margin: 0; } .dn_ee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ee-spacing-lg); } .dn_ee-card { background: #F0F8F0; padding: var(--ee-spacing-md); border-radius: var(--ee-radius-sm); } .dn_ee-card__title { color: #2E7D32; display: block; margin-bottom: var(--ee-spacing-sm); font-weight: 600; } .dn_ee-card__list { list-style: none; padding: 0; margin: var(--ee-spacing-xs) 0; font-size: 0.95em; } .dn_ee-card__list li { padding: var(--ee-spacing-xs) 0; } .dn_ee-graph { background: var(--ee-gray-100); border-radius: var(--ee-radius); padding: var(--ee-spacing-xl); margin: var(--ee-spacing-2xl) 0; } .dn_ee-graph__title { color: var(--ee-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--ee-spacing-lg); font-weight: 600; } .dn_ee-graph__diagram { background: #2D2D2D; color: #F8F8F2; padding: var(--ee-spacing-xl); border-radius: var(--ee-radius-sm); font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.8; overflow-x: auto; white-space: pre; margin: 0; } .dn_ee-implementation { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ee-spacing-xl); margin: var(--ee-spacing-2xl) 0; } .dn_ee-implementation__card { padding: var(--ee-spacing-xl); border-radius: var(--ee-radius); box-shadow: var(--ee-shadow-sm); transition: transform var(--ee-transiti); } :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #ffffff; --llm-gray-50: #f8f9fa; --llm-gray-100: #f1f5f9; --llm-gray-200: #e2e8f0; --llm-gray-600: #475569; --llm-gray-700: #334155; --llm-gray-800: #1e293b; --llm-spacing-xs: 4px; --llm-spacing-sm: 8px; --llm-spacing-md: 16px; --llm-spacing-lg: 24px; --llm-spacing-xl: 32px; --llm-spacing-2xl: 48px; --llm-spacing-3xl: 64px; --llm-spacing-4xl: 96px; --llm-radius: 14px; --llm-radius-sm: 8px; --llm-radius-lg: 20px; --llm-shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --llm-shadow-md: 0 4px 8px rgba(0,0,0,0.08); --llm-shadow-lg: 0 8px 16px rgba(0,0,0,0.12); --llm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dn_llm-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--llm-gray-800); background: var(--llm-white); } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--llm-spacing-lg); } .dn_container--narrow { max-width: 900px; } .dn_link { color: var(--llm-blue); text-decoration: none; font-weight: 600; transition: var(--llm-transition); } .dn_link:hover { color: var(--llm-primary); text-decoration: underline; } .dn_link:focus-visible { outline: 2px solid var(--llm-blue); outline-offset: 2px; border-radius: var(--llm-radius-sm); } .dn_link--inline { color: var(--llm-blue); text-decoration: none; font-weight: 500; } .dn_link--inline:hover { text-decoration: underline; } /* Meta Section */ .dn_llm-meta { background: var(--llm-gray-50); border-bottom: 1px solid var(--llm-gray-200); padding: var(--llm-spacing-md) 0; } .dn_llm-meta__content { text-align: center; } .dn_llm-meta__info { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); margin: var(--llm-spacing-xs) 0; display: flex; justify-content: center; gap: var(--llm-spacing-lg); flex-wrap: wrap; } .dn_llm-meta__breadcrumb { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); margin: var(--llm-spacing-sm) 0; } /* Hero Section */ .dn_llm-hero { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-blue) 100%); color: var(--llm-white); padding: var(--llm-spacing-4xl) 0; text-align: center; animation: dn_llmFadeIn 0.8s ease; } .dn_llm-hero__content { max-width: 900px; margin: 0 auto; } .dn_llm-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--llm-spacing-lg); line-height: 1.2; } .dn_llm-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; opacity: 0.95; } /* Navigation Section */ .dn_llm-nav { background: var(--llm-white); padding: var(--llm-spacing-2xl) 0; animation: dn_llmFadeIn 0.9s ease; } .dn_llm-nav__card { background: rgba(52, 142, 223, 0.1); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); border-left: 4px solid var(--llm-blue); } .dn_llm-nav__title { color: var(--llm-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); } .dn_llm-nav__list { list-style: none; padding: 0; margin: 0; } .dn_llm-nav__list li { padding: var(--llm-spacing-xs) 0; } /* Content Sections */ .dn_llm-section { background: var(--llm-white); padding: var(--llm-spacing-3xl) 0; animation: dn_llmFadeIn 1s ease; } .dn_llm-section--gray { background: var(--llm-gray-50); } .dn_llm-content__title { color: var(--llm-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--llm-spacing-xl); padding-bottom: var(--llm-spacing-md); border-bottom: 3px solid var(--llm-primary); } .dn_llm-content__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-xl); line-height: 1.6; } .dn_llm-content__subtitle { color: var(--llm-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; margin: var(--llm-spacing-2xl) 0 var(--llm-spacing-lg); } .dn_llm-content p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--llm-gray-700); margin-bottom: var(--llm-spacing-lg); } /* Alert Components */ .dn_llm-alert { padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .dn_llm-alert--warning { background: rgba(223, 71, 86, 0.1); border: 2px solid var(--llm-accent); } .dn_llm-alert__title { color: var(--llm-accent); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-alert__list { list-style: none; padding: 0; margin: 0; } .dn_llm-alert__list li { padding: var(--llm-spacing-xs) 0; padding-left: var(--llm-spacing-lg); position: relative; color: var(--llm-gray-700); } .dn_llm-alert__list li::before { content: "•"; position: absolute; left: 0; color: var(--llm-accent); } /* Metric Cards */ .dn_llm-metric-card { border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin-bottom: var(--llm-spacing-lg); transition: var(--llm-transition); } .dn_llm-metric-card:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .dn_llm-metric-card--primary { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); } .dn_llm-metric-card--blue { background: rgba(52, 142, 223, 0.1); border-left: 4px solid var(--llm-blue); } .dn_llm-metric-card--accent { background: rgba(223, 71, 86, 0.1); border-left: 4px solid var(--llm-accent); } .dn_llm-metric-card--secondary { background: rgba(47, 98, 173, 0.1); border-left: 4px solid var(--llm-secondary); } .dn_llm-metric-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); font-weight: 600; } .dn_llm-metric-card--blue .dn_llm-metric-card__title { color: var(--llm-blue); } .dn_llm-metric-card--accent .dn_llm-metric-card__title { color: var(--llm-accent); } .dn_llm-metric-card--secondary .dn_llm-metric-card__title { color: var(--llm-secondary); } .dn_llm-metric-card__content { background: rgba(255,255,255,0.95); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-metric-card--primary .dn_llm-metric-card__content { background: rgba(255,255,255,0.15); } .dn_llm-metric-list { list-style: none; padding: 0; margin: 0; } .dn_llm-metric-list li { padding: var(--llm-spacing-sm) 0; color: var(--llm-black); line-height: 1.6; } /* Tables */ .dn_llm-table { width: 100%; border-collapse: collapse; background: var(--llm-white); border-radius: var(--llm-radius-sm); overflow: hidden; box-shadow: var(--llm-shadow-sm); } .dn_llm-table--white { background: var(--llm-white); } .dn_llm-table thead { background: var(--llm-primary); } .dn_llm-table--white thead { background: var(--llm-white); color: var(--llm-primary); } .dn_llm-table thead th { padding: var(--llm-spacing-md); color: var(--llm-white); text-align: left; font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_llm-table--white thead th { color: var(--llm-primary); border-bottom: 2px solid var(--llm-primary); } .dn_llm-table tbody tr { border-bottom: 1px solid var(--llm-gray-200); } .dn_llm-table tbody tr:last-child { border-bottom: none; } .dn_llm-table tbody tr:hover { background: var(--llm-gray-50); } .dn_llm-table td { padding: var(--llm-spacing-md); color: var(--llm-gray-700); font-size: clamp(0.875rem, 1.5vw, 1rem); } /* Platform Tracking */ .dn_llm-platform { border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin-bottom: var(--llm-spacing-lg); } .dn_llm-platform--primary { background: rgba(25, 74, 154, 0.1); border: 2px solid var(--llm-primary); } .dn_llm-platform--blue { background: rgba(52, 142, 223, 0.1); border: 2px solid var(--llm-blue); } .dn_llm-platform__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-platform--primary .dn_llm-platform__title { color: var(--llm-primary); } .dn_llm-platform--blue .dn_llm-platform__title { color: var(--llm-blue); } .dn_llm-platform__content { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-platform__subtitle { color: var(--llm-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin: var(--llm-spacing-lg) 0 var(--llm-spacing-md); } .dn_llm-platform__subtitle:first-child { margin-top: 0; } .dn_llm-platform__list { list-style: decimal; padding-left: var(--llm-spacing-lg); margin: 0; line-height: 1.8; } /* Platform Cards Grid */ .dn_llm-platforms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); margin-top: var(--llm-spacing-xl); } .dn_llm-platform-card { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); border: 1px solid var(--llm-gray-200); transition: var(--llm-transition); } .dn_llm-platform-card:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-md); } .dn_llm-platform-card--secondary { background: rgba(47, 98, 173, 0.05); border-color: var(--llm-secondary); } .dn_llm-platform-card--accent { background: rgba(223, 71, 86, 0.05); border-color: var(--llm-accent); } .dn_llm-platform-card__title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-platform-card--secondary .dn_llm-platform-card__title { color: var(--llm-secondary); } .dn_llm-platform-card--accent .dn_llm-platform-card__title { color: var(--llm-accent); } .dn_llm-platform-card__list { list-style: none; padding: 0; margin: 0; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_llm-platform-card__list li { padding: var(--llm-spacing-xs) 0; } /* Code Blocks */ .dn_llm-code { background: var(--llm-dark); color: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.8; overflow-x: auto; white-space: pre; } .dn_llm-code--inline { display: block; background: var(--llm-gray-100); color: var(--llm-gray-700); padding: var(--llm-spacing-md); margin-top: var(--llm-spacing-md); } .dn_llm-code-block { background: var(--llm-gray-100); border-radius: var(--llm-radius); padding: var(--llm-spacing-lg); margin: var(--llm-spacing-xl) 0; } /* Testing Section */ .dn_llm-testing { background: rgba(52, 142, 223, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-top: var(--llm-spacing-xl); } .dn_llm-testing__title { color: var(--llm-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); } .dn_llm-testing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--llm-spacing-lg); } .dn_llm-testing__card { background: var(--llm-white); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); } .dn_llm-testing__list { list-style: none; padding: 0; margin: var(--llm-spacing-xs) 0 0 0; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_llm-testing__list li { padding: var(--llm-spacing-xs) 0; } /* ROI Section */ .dn_llm-roi { padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .dn_llm-roi--accent { background: linear-gradient(135deg, var(--llm-accent) 0%, rgba(223, 71, 86, 0.8) 100%); color: var(--llm-white); } .dn_llm-roi--blue { background: rgba(52, 142, 223, 0.05); border-left: 4px solid var(--llm-blue); } .dn_llm-roi--primary { background: rgba(25, 74, 154, 0.05); } .dn_llm-roi__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); font-weight: 600; } .dn_llm-roi--blue .dn_llm-roi__title { color: var(--llm-blue); } .dn_llm-roi--primary .dn_llm-roi__title { color: var(--llm-primary); } .dn_llm-roi__content { background: rgba(255,255,255,0.95); color: var(--llm-gray-800); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-roi--blue .dn_llm-roi__content, .dn_llm-roi--primary .dn_llm-roi__content { background: var(--llm-white); } .dn_llm-roi__subtitle { color: var(--llm-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-roi__list { list-style: decimal; padding-left: var(--llm-spacing-lg); margin: 0; line-height: 2; } /* Dashboard Cards */ .dn_llm-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-xl); } .dn_llm-dashboard-card { padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); transition: var(--llm-transition); } .dn_llm-dashboard-card:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .dn_llm-dashboard-card--primary { background: rgba(52, 142, 223, 0.1); } .dn_llm-dashboard-card--accent { background: rgba(223, 71, 86, 0.1); } .dn_llm-dashboard-card--secondary { background: rgba(47, 98, 173, 0.1); } .dn_llm-dashboard-card__title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-dashboard-card--primary .dn_llm-dashboard-card__title { color: var(--llm-blue); } .dn_llm-dashboard-card--accent .dn_llm-dashboard-card__title { color: var(--llm-accent); } .dn_llm-dashboard-card--secondary .dn_llm-dashboard-card__title { color: var(--llm-secondary); } .dn_llm-dashboard-card__list { list-style: none; padding: 0; margin: 0; } .dn_llm-dashboard-card__list li { padding: var(--llm-spacing-xs) 0; line-height: 1.6; } /* API Section */ .dn_llm-api { background: rgba(47, 98, 173, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-lg); } .dn_llm-api__title { color: var(--llm-secondary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); } /* Report Section */ .dn_llm-report { background: rgba(52, 142, 223, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .dn_llm-report__title { color: var(--llm-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); } .dn_llm-report__content { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-report__subtitle { color: var(--llm-gray-700); font-size: clamp(1rem, 1.5vw, 1.125rem); margin: var(--llm-spacing-lg) 0 var(--llm-spacing-md); font-weight: 600; } .dn_llm-report__subtitle:first-child { margin-top: 0; } .dn_llm-report__list { list-style: none; padding: 0; margin: 0; padding-left: var(--llm-spacing-lg); } .dn_llm-report__list li { padding: var(--llm-spacing-xs) 0; position: relative; } .dn_llm-report__list li::before { content: "•"; position: absolute; left: calc(-1 * var(--llm-spacing-lg)); color: var(--llm-blue); } /* Workflow Section */ .dn_llm-workflow { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-blue) 100%); color: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .dn_llm-workflow__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); } .dn_llm-workflow__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-md); } .dn_llm-workflow__step { background: rgba(255,255,255,0.15); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-workflow__step-title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-md); } .dn_llm-workflow__list { list-style: none; padding: 0; margin: 0; } .dn_llm-workflow__list li { padding: var(--llm-spacing-xs) 0; padding-left: var(--llm-spacing-lg); position: relative; } .dn_llm-workflow__list li::before { content: "•"; position: absolute; left: 0; } /* CTA Section */ .dn_llm-cta { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-blue) 100%); color: var(--llm-white); padding: var(--llm-spacing-3xl) 0; } .dn_llm-cta__content { text-align: center; } .dn_llm-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--llm-spacing-lg); } .dn_llm-cta__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-2xl); max-width: 700px; margin-left: auto; margin-right: auto; } .dn_llm-cta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--llm-spacing-lg); } .dn_llm-cta__card { background: rgba(255,255,255,0.15); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); backdrop-filter: blur(10px); } .dn_llm-cta__card-title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--llm-spacing-md); } .dn_llm-cta__card-text { margin-bottom: var(--llm-spacing-md); line-height: 1.6; } .dn_llm-cta__card .dn_link { color: var(--llm-white); text-decoration: underline; } .dn_llm-cta__card .dn_link:hover { text-decoration: none; } /* Conclusion Section */ .dn_llm-conclusion { text-align: center; } .dn_llm-conclusion__title { color: var(--llm-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--llm-spacing-lg); font-weight: 700; } .dn_llm-conclusion__text { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; margin-bottom: var(--llm-spacing-xl); color: var(--llm-gray-700); } .dn_llm-conclusion__subtitle { color: var(--llm-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-md); font-weight: 600; } .dn_llm-conclusion__list { text-align: left; max-width: 600px; margin: 0 auto var(--llm-spacing-xl); padding-left: var(--llm-spacing-lg); line-height: 2; } .dn_llm-conclusion__cta { background: var(--llm-primary); color: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin-top: var(--llm-spacing-lg); } .dn_llm-conclusion__cta p { margin: 0; font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; } /* Animations */ @keyframes dn_llmFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #ffffff; --llm-gray-50: #f8f9fa; --llm-gray-100: #f1f5f9; --llm-gray-200: #e5e7eb; --llm-gray-300: #d1d5db; --llm-gray-600: #6c757d; --llm-gray-700: #495057; --llm-gray-800: #343a40; --llm-space-xs: 4px; --llm-space-sm: 8px; --llm-space-md: 16px; --llm-space-lg: 24px; --llm-space-xl: 32px; --llm-space-2xl: 48px; --llm-space-3xl: 64px; --llm-space-4xl: 96px; --llm-radius: 14px; --llm-radius-sm: 8px; --llm-radius-lg: 20px; --llm-radius-full: 50px; --llm-shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --llm-shadow-md: 0 4px 6px rgba(0,0,0,0.08); --llm-shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --llm-shadow-xl: 0 20px 25px rgba(0,0,0,0.15); --llm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --llm-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes llmFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .llm_article { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--llm-gray-800); background: var(--llm-white); } .llm_meta { background: var(--llm-gray-50); border-bottom: 1px solid var(--llm-gray-200); padding: var(--llm-space-md) 0; } .llm_meta__content { text-align: center; } .llm_meta__info { display: flex; justify-content: center; gap: var(--llm-space-lg); flex-wrap: wrap; margin: 0 0 var(--llm-space-xs) 0; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_meta__date, .llm_meta__author, .llm_meta__reading { color: var(--llm-gray-600); } .llm_meta__category { color: var(--llm-gray-600); font-size: clamp(0.8rem, 1.2vw, 0.9rem); margin: var(--llm-space-xs) 0; } .llm_meta__badge { color: var(--llm-primary); font-size: clamp(0.8rem, 1.2vw, 0.9rem); font-weight: 700; text-transform: uppercase; margin: 0; } .llm_hero { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); color: var(--llm-white); padding: var(--llm-space-4xl) 0; position: relative; overflow: hidden; } .llm_hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .llm_hero__content { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto; animation: llmFadeInUp 0.8s ease; } .llm_hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--llm-space-lg); } .llm_hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; margin-bottom: var(--llm-space-xl); opacity: 0.95; } .llm_hero__badges { display: flex; justify-content: center; gap: var(--llm-space-md); flex-wrap: wrap; } .llm_hero__badge { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); padding: var(--llm-space-sm) var(--llm-space-lg); border-radius: var(--llm-radius-full); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_stats { background: var(--llm-white); padding: var(--llm-space-3xl) 0; animation: llmFadeInUp 0.8s ease 0.1s both; } .llm_stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-space-lg); } .llm_stats__item { text-align: center; padding: var(--llm-space-lg); background: var(--llm-white); border-radius: var(--llm-radius); border-top: 4px solid var(--llm-primary); box-shadow: var(--llm-shadow-md); transition: var(--llm-transition); } .llm_stats__item:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .llm_stats__item--success { border-top-color: #28a745; } .llm_stats__item--warning { border-top-color: #ffc107; } .llm_stats__item--danger { border-top-color: var(--llm-accent); } .llm_stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--llm-primary); margin-bottom: var(--llm-space-sm); } .llm_stats__item--success .llm_stats__value { color: #28a745; } .llm_stats__item--warning .llm_stats__value { color: #ffc107; } .llm_stats__item--danger .llm_stats__value { color: var(--llm-accent); } .llm_stats__label { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_main { background: var(--llm-gray-50); padding: var(--llm-space-3xl) 0; } .llm_section { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-space-2xl); margin-bottom: var(--llm-space-xl); box-shadow: var(--llm-shadow-md); animation: llmFadeInUp 0.8s ease; } .llm_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--llm-dark); margin-bottom: var(--llm-space-xl); padding-bottom: var(--llm-space-md); border-bottom: 3px solid var(--llm-primary); } .llm_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; color: var(--llm-gray-800); margin: var(--llm-space-xl) 0 var(--llm-space-lg); } .llm_section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--llm-gray-700); margin-bottom: var(--llm-space-lg); } .llm_highlight { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-lg); } .llm_highlight--gradient { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-blue) 100%); } .llm_highlight--gradient-warm { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); } .llm_highlight__title { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--llm-space-md); } .llm_highlight__text { margin-bottom: var(--llm-space-md); } .llm_highlight__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--llm-space-md); } .llm_highlight__item { background: rgba(255,255,255,0.15); padding: var(--llm-space-md); border-radius: var(--llm-radius-sm); } .llm_highlight__number { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: var(--llm-space-xs); } .llm_highlight__label { font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_highlight__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_highlight__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_highlight__list li::before { content: '•'; position: absolute; left: -20px; } .llm_highlight__box { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); } .llm_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--llm-space-lg); margin-bottom: var(--llm-space-lg); } .llm_comparison__card { padding: var(--llm-space-lg); border-radius: var(--llm-radius); transition: var(--llm-transition); } .llm_comparison__card--traditional { background: #f0f4ff; border-left: 4px solid var(--llm-primary); } .llm_comparison__card--ai { background: #e8f5e9; border-left: 4px solid #28a745; } .llm_comparison__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--llm-space-md); } .llm_comparison__card--traditional .llm_comparison__title { color: var(--llm-primary); } .llm_comparison__card--ai .llm_comparison__title { color: #2e7d32; } .llm_comparison__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_comparison__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_comparison__list li::before { content: '•'; position: absolute; left: -15px; color: var(--llm-primary); } .llm_comparison__card--ai .llm_comparison__list li::before { color: #28a745; } .llm_alert { padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-lg); } .llm_alert--warning { background: #fff3cd; border: 2px solid #ffc107; } .llm_alert__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--llm-space-sm); color: #856404; } .llm_alert__text { margin: 0; color: #856404; } .llm_stages { display: flex; flex-direction: column; gap: var(--llm-space-lg); } .llm_stage { padding: var(--llm-space-lg); border-radius: var(--llm-radius); border-left: 4px solid; } .llm_stage--foundation { background: #e3f2fd; border-color: #2196f3; } .llm_stage--tuning { background: #fce4ec; border-color: #e91e63; } .llm_stage--retrieval { background: #e8f5e9; border-color: #4caf50; } .llm_stage__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--llm-space-md); } .llm_stage--foundation .llm_stage__title { color: #1565c0; } .llm_stage--tuning .llm_stage__title { color: #c2185b; } .llm_stage--retrieval .llm_stage__title { color: #2e7d32; } .llm_stage__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_stage__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_stage__list li::before { content: '•'; position: absolute; left: -15px; } .llm_code-block { background: #2d2d2d; color: #f8f8f2; padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin: var(--llm-space-lg) 0; } .llm_code-block--dark { background: #1a1a1a; } .llm_code-block__title { color: var(--llm-white); margin-bottom: var(--llm-space-md); } .llm_code-block__content { font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.8; overflow-x: auto; margin: 0; } .llm_table-wrapper { overflow-x: auto; margin: var(--llm-space-lg) 0; } .llm_table { width: 100%; border-collapse: collapse; background: var(--llm-white); box-shadow: var(--llm-shadow-lg); border-radius: var(--llm-radius); overflow: hidden; } .llm_table thead { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); } .llm_table th { padding: var(--llm-space-lg); text-align: left; color: var(--llm-white); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_table tbody tr { border-bottom: 1px solid var(--llm-gray-200); } .llm_table tbody tr:nth-child(even), .llm_table__row--alt { background: var(--llm-gray-50); } .llm_table tbody tr:hover { background: #e8f4fd; } .llm_table td { padding: var(--llm-space-lg); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_table__row--highlight { background: #e8f5e9 !important; } .llm_table__success { color: #28a745; font-weight: 700; } .llm_channels { display: flex; flex-direction: column; gap: var(--llm-space-lg); } .llm_channel { background: var(--llm-gray-50); padding: var(--llm-space-xl); border-radius: var(--llm-radius); border-top: 4px solid; transition: var(--llm-transition); } .llm_channel:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .llm_channel--owned { border-color: #2196f3; background: #e3f2fd; } .llm_channel--earned { border-color: #4caf50; background: #e8f5e9; } .llm_channel--social { border-color: #e91e63; background: #fce4ec; } .llm_channel--partner { border-color: #ff9800; background: #fff3e0; } .llm_channel__title { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; margin-bottom: var(--llm-space-lg); } .llm_channel--owned .llm_channel__title { color: #1565c0; } .llm_channel--earned .llm_channel__title { color: #2e7d32; } .llm_channel--social .llm_channel__title { color: #c2185b; } .llm_channel--partner .llm_channel__title { color: #e65100; } .llm_channel__content { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); margin-bottom: var(--llm-space-md); } .llm_channel__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--llm-gray-800); margin-bottom: var(--llm-space-md); } .llm_channel__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_channel__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_channel__list li::before { content: '•'; position: absolute; left: -15px; color: var(--llm-primary); } .llm_channel__grid { display: flex; flex-wrap: wrap; gap: var(--llm-space-sm); } .llm_channel__tag { background: var(--llm-white); padding: var(--llm-space-sm) var(--llm-space-md); border-radius: var(--llm-radius-sm); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--llm-gray-700); } .llm_channel__grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-space-md); } .llm_channel__platform { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); } .llm_channel__platform-name { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: #0077b5; margin-bottom: var(--llm-space-md); } .llm_channel__platform-name--youtube { color: #ff0000; } .llm_channel__platform-name--reddit { color: #ff4500; } .llm_channel__platform-list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_channel__platform-list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_channel__platform-list li::before { content: '•'; position: absolute; left: -15px; } .llm_framework { display: grid; gap: var(--llm-space-lg); } .llm_framework__item { color: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_framework__item--comprehensive { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); } .llm_framework__item--logical { background: var(--llm-gray-50); color: var(--llm-gray-800); border-left: 4px solid var(--llm-primary); } .llm_framework__item--evidence { background: var(--llm-gray-50); color: var(--llm-gray-800); border-left: 4px solid #4caf50; } .llm_framework__item--accessible { background: var(--llm-gray-50); color: var(--llm-gray-800); border-left: 4px solid #ff9800; } .llm_framework__item--referenceable { background: var(--llm-gray-50); color: var(--llm-gray-800); border-left: 4px solid #e91e63; } .llm_framework__title { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; margin-bottom: var(--llm-space-md); } .llm_framework__item--logical .llm_framework__title { color: var(--llm-primary); } .llm_framework__item--evidence .llm_framework__title { color: #2e7d32; } .llm_framework__item--accessible .llm_framework__title { color: #e65100; } .llm_framework__item--referenceable .llm_framework__title { color: #c2185b; } .llm_framework__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_framework__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_framework__list li::before { content: '•'; position: absolute; left: -15px; } .llm_chart { background: #2d2d2d; color: #f8f8f2; padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin: var(--llm-space-lg) 0; } .llm_chart__content { font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.8; margin: 0; overflow-x: auto; } .llm_template { background: var(--llm-gray-50); padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_template__title { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--llm-gray-800); margin-bottom: var(--llm-space-lg); } .llm_template__step { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); margin-bottom: var(--llm-space-md); } .llm_template__step-title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--llm-primary); margin-bottom: var(--llm-space-md); } .llm_template__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; color: var(--llm-gray-600); } .llm_template__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_template__list li::before { content: '•'; position: absolute; left: -15px; color: var(--llm-primary); } .llm_entities { background: #e3f2fd; padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-lg); } .llm_entities__title { color: #1565c0; margin-bottom: var(--llm-space-md); } .llm_entities__grid { display: grid; gap: var(--llm-space-md); } .llm_entity { background: var(--llm-white); padding: var(--llm-space-md); border-radius: var(--llm-radius-sm); } .llm_entity__name { display: block; margin-bottom: var(--llm-space-xs); } .llm_entity__desc { margin: var(--llm-space-xs) 0; color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_authority { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-space-lg); } .llm_authority__card { padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_authority__card--internal { background: #e8f5e9; } .llm_authority__card--external { background: #fff3e0; } .llm_authority__title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-space-md); } .llm_authority__card--internal .llm_authority__title { color: #2e7d32; } .llm_authority__card--external .llm_authority__title { color: #e65100; } .llm_authority__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_authority__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_authority__list li::before { content: '•'; position: absolute; left: -15px; } .llm_models { display: flex; flex-direction: column; gap: var(--llm-space-lg); } .llm_model { border-radius: var(--llm-radius); overflow: hidden; box-shadow: var(--llm-shadow-lg); transition: var(--llm-transition); } .llm_model:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-xl); } .llm_model--chatgpt { background: linear-gradient(135deg, #10a37f 0%, #147c5e 100%); color: var(--llm-white); } .llm_model--perplexity { background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); color: var(--llm-white); } .llm_model--claude { background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); color: var(--llm-white); } .llm_model--gemini { background: linear-gradient(135deg, #ea4335 0%, #fbbc04 100%); color: var(--llm-white); } .llm_model__title { font-size: clamp(1.25rem, 2vw, 1.5rem); padding: var(--llm-space-lg); border-bottom: 1px solid rgba(255,255,255,0.2); } .llm_model__content { padding: var(--llm-space-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-space-lg); } .llm_model__column { background: rgba(255,255,255,0.15); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); } .llm_model__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-space-md); } .llm_model__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_model__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_model__list li::before { content: '•'; position: absolute; left: -15px; } .llm_model__footer { padding: var(--llm-space-lg); background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); } .llm_attribution { background: #f0f4ff; padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_attribution__title { color: var(--llm-primary); margin-bottom: var(--llm-space-md); } .llm_attribution__formula { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); margin-bottom: var(--llm-space-md); } .llm_attribution__formula code { background: var(--llm-gray-50); padding: var(--llm-space-sm); border-radius: var(--llm-radius-sm); display: block; font-family: 'Courier New', monospace; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_attribution__example { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); } .llm_attribution__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; color: var(--llm-gray-600); } .llm_attribution__list li { padding: var(--llm-space-xs) 0; } .llm_attribution__list li:last-child { font-weight: 700; color: var(--llm-gray-800); } .llm_funnel { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); padding: var(--llm-space-2xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-xl); } .llm_funnel__title { color: var(--llm-white); text-align: center; margin-bottom: var(--llm-space-xl); font-size: clamp(1.5rem, 2.5vw, 2rem); } .llm_funnel__stage { background: rgba(255,255,255,0.95); color: var(--llm-gray-800); padding: var(--llm-space-lg); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-lg); } .llm_funnel__stage--seed { opacity: 1; } .llm_funnel__stage--crawl { opacity: 0.95; transform: scale(0.98); } .llm_funnel__stage--reference { opacity: 0.90; transform: scale(0.96); } .llm_funnel__stage--preference { opacity: 0.85; transform: scale(0.94); } .llm_funnel__stage--convert { opacity: 0.80; transform: scale(0.92); border: 3px solid #28a745; } .llm_funnel__stage-title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--llm-primary); margin-bottom: var(--llm-space-md); } .llm_funnel__content { display: grid; grid-template-columns: 1fr 2fr; gap: var(--llm-space-lg); } .llm_funnel__metric { background: var(--llm-gray-50); padding: var(--llm-space-md); border-radius: var(--llm-radius-sm); } .llm_funnel__activities { background: var(--llm-gray-50); padding: var(--llm-space-md); border-radius: var(--llm-radius-sm); } .llm_funnel__activities ul { margin: var(--llm-space-xs) 0 0; padding-left: var(--llm-space-lg); list-style: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_funnel__activities li { position: relative; padding: 2px 0; } .llm_funnel__activities li::before { content: '•'; position: absolute; left: -15px; color: var(--llm-primary); } .llm_strategies { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-space-lg); background: var(--llm-gray-50); padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_strategy { background: var(--llm-white); padding: var(--llm-space-lg); border-radius: var(--llm-radius-sm); } .llm_strategy__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--llm-primary); margin-bottom: var(--llm-space-md); } .llm_strategy__title--purple { color: #9b59b6; } .llm_strategy__title--green { color: #28a745; } .llm_strategy__title--red { color: var(--llm-accent); } .llm_strategy__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm_strategy__list li { padding: var(--llm-space-xs) 0; position: relative; } .llm_strategy__list li::before { content: '•'; position: absolute; left: -15px; color: var(--llm-primary); } .llm_roadmap { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); padding: var(--llm-space-2xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-space-xl); } .llm_roadmap__title { text-align: center; margin-bottom: var(--llm-space-xl); font-size: clamp(1.5rem, 2.5vw, 2rem); } .llm_roadmap__phases { display: flex; flex-direction: column; gap: var(--llm-space-lg); } .llm_roadmap__phase { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--llm-space-lg); border-radius: var(--llm-radius); } .llm_roadmap__phase-title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-space-lg); } .llm_roadmap__list { margin: 0; padding-left: var(--llm-space-lg); list-style: none; } .llm_roadmap__list li { padding: var(--llm-space-xs) 0; } .llm_cta { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); padding: var(--llm-space-3xl); border-radius: var(--llm-radius); text-align: center; color: var(--llm-white); box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin: var(--llm-space-2xl) 0; } .llm_cta__content { max-width: 900px; margin: 0 auto; } .llm_cta__title { font-size: clamp(2rem, 3.5vw, 2.5rem); margin-bottom: var(--llm-space-lg); } .llm_cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--llm-space-xl); opacity: 0.95; } .llm_cta__box { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: var(--llm-space-xl); border-radius: var(--llm-radius); } .llm_cta__box-title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--llm-space-lg); } .llm_cta__list { text-align: left; list-style: none; padding: 0; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.125rem); max-width: 600px; margin: 0 auto var(--llm-space-lg); } .llm_cta__button { display: inline-block; background: var(--llm-white); color: #28a745; padding: var(--llm-space-md) var(--llm-space-2xl); border-radius: var(--llm-radius); text-decoration: none; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: var(--llm-transition); box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .llm_cta__button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .llm_cta__button:focus-visible { outline: 3px solid var(--llm-white); outline-offset: 3px; } .llm_about { background: var(--llm-gray-50); padding: var(--llm-space-xl); border-radius: var(-); } :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #ffffff; --llm-gray-light: #f8f9fa; --llm-gray-medium: #e5e7eb; --llm-gray-dark: #6b7280; --llm-spacing-xs: 4px; --llm-spacing-sm: 8px; --llm-spacing-md: 16px; --llm-spacing-lg: 24px; --llm-spacing-xl: 32px; --llm-spacing-2xl: 48px; --llm-spacing-3xl: 64px; --llm-spacing-4xl: 96px; --llm-radius: 14px; --llm-radius-sm: 8px; --llm-radius-lg: 20px; --llm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --llm-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --llm-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --llm-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --llm-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes llm-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_llm-article { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--llm-black); background: var(--llm-white); } .dn_llm-meta { background: var(--llm-gray-light); padding: var(--llm-spacing-lg) 0; border-bottom: 1px solid var(--llm-gray-medium); animation: llm-fadeInUp 0.6s ease-out; } .dn_llm-meta__info { display: flex; gap: var(--llm-spacing-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--llm-spacing-sm); font-size: 0.95rem; color: var(--llm-gray-dark); } .dn_llm-meta__update { text-align: center; color: var(--llm-gray-dark); font-size: 0.9rem; } .dn_llm-meta__update p { margin: var(--llm-spacing-xs) 0; } .dn_llm-meta__badge { color: var(--llm-primary); font-weight: bold; } .dn_llm-hero { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); padding: var(--llm-spacing-4xl) var(--llm-spacing-lg); text-align: center; animation: llm-fadeInUp 0.8s ease-out 0.1s both; } .dn_llm-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--llm-spacing-lg); line-height: 1.2; } .dn_llm-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); max-width: 900px; margin: 0 auto; opacity: 0.95; } .dn_llm-intro { background: var(--llm-white); padding: var(--llm-spacing-3xl) var(--llm-spacing-lg); animation: llm-fadeInUp 0.8s ease-out 0.2s both; } .dn_llm-intro__content { max-width: 900px; margin: 0 auto; } .dn_llm-intro__content p { font-size: 1.125rem; line-height: 1.8; margin-bottom: var(--llm-spacing-lg); color: var(--llm-gray-dark); } .dn_llm-highlight { color: var(--llm-primary); font-weight: 600; } .dn_llm-section { padding: var(--llm-spacing-3xl) 0; animation: llm-fadeInUp 0.8s ease-out 0.3s both; } .dn_llm-section--alt { background: var(--llm-gray-light); } .dn_llm-section--feature { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); } .dn_llm-section__title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); text-align: center; padding-bottom: var(--llm-spacing-md); border-bottom: 3px solid var(--llm-primary); } .dn_llm-section__title--white { color: var(--llm-white); border-bottom-color: rgba(255, 255, 255, 0.3); } .dn_llm-section__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; color: var(--llm-primary); margin: var(--llm-spacing-xl) 0 var(--llm-spacing-lg); } .dn_llm-section p { font-size: 1.05rem; line-height: 1.8; margin-bottom: var(--llm-spacing-lg); color: var(--llm-gray-dark); } .dn_llm-section--feature p { color: var(--llm-white); } .dn_llm-checklist { background: var(--llm-gray-light); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .dn_llm-checklist ul { list-style: none; padding: 0; } .dn_llm-checklist li { padding: var(--llm-spacing-sm) 0; border-bottom: 1px solid var(--llm-gray-medium); } .dn_llm-checklist li:last-child { border-bottom: none; } .dn_llm-stat { background: #fff3cd; border: 2px solid #ffc107; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .dn_llm-stat p { margin: 0; color: #856404; } .dn_llm-stat__label { font-weight: 700; } .dn_llm-table-wrapper { overflow-x: auto; margin: var(--llm-spacing-xl) 0; } .dn_llm-table { width: 100%; border-collapse: collapse; background: var(--llm-white); box-shadow: var(--llm-shadow-md); border-radius: var(--llm-radius); overflow: hidden; } .dn_llm-table thead { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); } .dn_llm-table thead th { padding: var(--llm-spacing-lg); text-align: left; color: var(--llm-white); font-weight: 600; } .dn_llm-table tbody tr { border-bottom: 1px solid var(--llm-gray-medium); } .dn_llm-table tbody tr:nth-child(even) { background: var(--llm-gray-light); } .dn_llm-table tbody tr:hover { background: #e8f4fd; } .dn_llm-table tbody td { padding: var(--llm-spacing-lg); } .dn_llm-badge { display: inline-block; padding: var(--llm-spacing-xs) var(--llm-spacing-sm); border-radius: 20px; font-size: 0.875rem; font-weight: 600; } .dn_llm-badge--critical { background: var(--llm-accent); color: var(--llm-white); } .dn_llm-badge--high { background: #ff9800; color: var(--llm-white); } .dn_llm-badge--medium { background: #ffc107; color: var(--llm-black); } .dn_llm-badge--low { background: #6c757d; color: var(--llm-white); } .dn_llm-impact { background: #e8f4fd; padding: var(--llm-spacing-lg); border-left: 4px solid var(--llm-blue); border-radius: 0 var(--llm-radius-sm) var(--llm-radius-sm) 0; margin: var(--llm-spacing-lg) 0; } .dn_llm-impact ul { list-style: disc; padding-left: var(--llm-spacing-lg); margin: 0; } .dn_llm-impact li { padding: var(--llm-spacing-xs) 0; } .dn_llm-strategies { display: grid; gap: var(--llm-spacing-xl); } .dn_llm-strategy { background: var(--llm-gray-light); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); transition: var(--llm-transition); } .dn_llm-strategy:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .dn_llm-strategy--primary { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); } .dn_llm-strategy h3 { font-size: 1.5rem; margin-bottom: var(--llm-spacing-md); color: var(--llm-dark); } .dn_llm-strategy--primary h3 { color: var(--llm-white); } .dn_llm-strategy p { margin-bottom: var(--llm-spacing-lg); } .dn_llm-strategy--primary p { color: var(--llm-white); opacity: 0.95; } .dn_llm-strategy__steps { background: rgba(255, 255, 255, 0.15); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-strategy__steps h4 { color: var(--llm-white); margin-bottom: var(--llm-spacing-md); } .dn_llm-strategy__steps ul { list-style: none; padding: 0; } .dn_llm-strategy__steps li { padding: var(--llm-spacing-xs) 0; } .dn_llm-strategy__label { color: var(--llm-primary); font-weight: 600; margin-bottom: var(--llm-spacing-sm); } .dn_llm-strategy ul { list-style: disc; padding-left: var(--llm-spacing-lg); } .dn_llm-strategy li { padding: var(--llm-spacing-xs) 0; } .dn_llm-pillars { display: grid; gap: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .dn_llm-pillar { background: var(--llm-gray-light); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); border-top: 4px solid var(--llm-blue); } .dn_llm-pillar h3 { color: var(--llm-primary); margin-bottom: var(--llm-spacing-md); } .dn_llm-pillar ul { list-style: none; padding: 0; } .dn_llm-pillar li { padding: var(--llm-spacing-sm) 0; } .dn_llm-code { background: #2d2d2d; color: #f8f8f2; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9rem; } .dn_llm-code pre { margin: 0; } .dn_llm-feature { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .dn_llm-feature h3 { margin-bottom: var(--llm-spacing-md); } .dn_llm-feature ul { list-style: none; padding: 0; } .dn_llm-feature li { padding: var(--llm-spacing-xs) 0; } .dn_llm-tip { background: #e8f5e9; border: 1px solid #4caf50; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin: var(--llm-spacing-xl) 0; } .dn_llm-tip h4 { color: #2e7d32; margin-bottom: var(--llm-spacing-sm); } .dn_llm-tip p { margin: 0; color: #2e7d32; } .dn_llm-timeline { display: grid; gap: var(--llm-spacing-lg); } .dn_llm-phase { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); border-left: 4px solid; } .dn_llm-phase--foundation { border-color: #2196f3; background: #e3f2fd; } .dn_llm-phase--content { border-color: #e91e63; background: #fce4ec; } .dn_llm-phase--authority { border-color: #4caf50; background: #e8f5e9; } .dn_llm-phase--optimization { border-color: #ff9800; background: #fff3e0; } .dn_llm-phase h3 { margin-bottom: var(--llm-spacing-sm); color: var(--llm-dark); } .dn_llm-phase ul { list-style: none; padding: 0; } .dn_llm-phase li { padding: var(--llm-spacing-xs) 0; } .dn_llm-gmb { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); box-shadow: var(--llm-shadow-md); } .dn_llm-gmb h3 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-lg); } .dn_llm-gmb ul { list-style: none; padding: 0; } .dn_llm-gmb li { padding: var(--llm-spacing-sm) 0; border-bottom: 1px solid var(--llm-gray-medium); } .dn_llm-gmb li:last-child { border-bottom: none; } .dn_llm-success { color: #28a745; font-weight: 700; } .dn_llm-formula { background: #2d2d2d; color: #f8f8f2; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin: var(--llm-spacing-xl) 0; } .dn_llm-formula h4 { color: var(--llm-white); margin-bottom: var(--llm-spacing-sm); } .dn_llm-formula pre { margin: 0; color: #f8f8f2; font-family: 'Courier New', monospace; } .dn_llm-case { padding: var(--llm-spacing-xl); } .dn_llm-case__block { background: rgba(255, 255, 255, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .dn_llm-case__block h3 { margin-bottom: var(--llm-spacing-md); } .dn_llm-case__block ul { list-style: none; padding: 0; } .dn_llm-case__block li { padding: var(--llm-spacing-xs) 0; } .dn_llm-case__title { margin: var(--llm-spacing-xl) 0 var(--llm-spacing-lg); } .dn_llm-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-lg); } .dn_llm-result { background: rgba(255, 255, 255, 0.2); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); text-align: center; transition: var(--llm-transition); } .dn_llm-result:hover { transform: scale(1.05); } .dn_llm-result__value { font-size: 3rem; font-weight: 700; margin-bottom: var(--llm-spacing-sm); } .dn_llm-result__label { margin: 0; font-size: 0.9rem; } .dn_llm-priorities { background: var(--llm-gray-light); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .dn_llm-priorities ol { line-height: 2; padding-left: var(--llm-spacing-lg); } .dn_llm-priorities li { padding: var(--llm-spacing-sm) 0; border-bottom: 1px solid var(--llm-gray-medium); } .dn_llm-priorities li:last-child { border-bottom: none; } .dn_llm-cta { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-secondary) 100%); color: var(--llm-white); padding: var(--llm-spacing-4xl) var(--llm-spacing-lg); text-align: center; animation: llm-fadeInUp 0.8s ease-out 0.4s both; } .dn_llm-cta__title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: var(--llm-spacing-lg); } .dn_llm-cta__subtitle { font-size: 1.25rem; margin-bottom: var(--llm-spacing-xl); opacity: 0.95; } .dn_llm-cta__box { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); max-width: 700px; margin: 0 auto; } .dn_llm-cta__box h3 { font-size: 1.5rem; margin-bottom: var(--llm-spacing-lg); } .dn_llm-cta__box p { margin-bottom: var(--llm-spacing-xl); } .dn_llm-cta__features { list-style: none; padding: 0; text-align: left; margin-bottom: var(--llm-spacing-xl); } .dn_llm-cta__features li { padding: var(--llm-spacing-sm) 0; } .dn_llm-cta__urgency { background: rgba(255, 255, 255, 0.2); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); font-weight: 600; } .dn_llm-faq { background: var(--llm-gray-light); padding: var(--llm-spacing-3xl) 0; animation: llm-fadeInUp 0.8s ease-out 0.5s both; } .dn_llm-faq__item { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-lg); transition: var(--llm-transition); } .dn_llm-faq__item:hover { box-shadow: var(--llm-shadow-md); } .dn_llm-faq__item h3 { color: var(--llm-primary); margin-bottom: var(--llm-spacing-md); } .dn_llm-faq__item p { margin: 0; line-height: 1.8; color: var(--llm-gray-dark); } .dn_llm-platforms { display: grid; gap: var(--llm-spacing-lg); } .dn_llm-platform { padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); transition: var(--llm-transition); } .dn_llm-platform:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .dn_llm-platform--linkedin { background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%); color: var(--llm-white); } .dn_llm-platform--youtube { background: #fff0f0; border: 1px solid #ff4444; } .dn_llm-platform--reddit { background: #fff4e6; border: 1px solid #ff6600; } .dn_llm-platform h4 { margin-bottom: var(--llm-spacing-md); } .dn_llm-platform--youtube h4 { color: #cc0000; } .dn_llm-platform--reddit h4 { color: #ff6600; } .dn_llm-platform ul { list-style: none; padding: 0; } .dn_llm-platform li { padding: var(--llm-spacing-xs) 0; } .dn_llm-formatting { background: var(--llm-gray-light); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-formatting p { margin-bottom: var(--llm-spacing-md); } .dn_llm-formatting ul { list-style: none; padding: 0; } .dn_llm-formatting li { padding: var(--llm-spacing-sm) 0; border-bottom: 1px solid var(--llm-gray-medium); } .dn_llm-formatting li:last-child { border-bottom: none; } .dn_llm-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); margin: var(--llm-spacing-xl) 0; } .dn_llm-format { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); border-left: 4px solid; transition: var(--llm-transition); } .dn_llm-format:nth-child(1) { border-color: #4caf50; background: #e8f5e9; } .dn_llm-format:nth-child(2) { border-color: #e91e63; background: #fce4ec; } .dn_llm-format:nth-child(3) { border-color: #2196f3; background: #e3f2fd; } .dn_llm-format:nth-child(4) { border-color: #ff9800; background: #fff3e0; } .dn_llm-format:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-md); } .dn_llm-format h3 { margin-bottom: var(--llm-spacing-md); } .dn_llm-format:nth-child(1) h3 { color: #2e7d32; } .dn_llm-format:nth-child(2) h3 { color: #c2185b; } .dn_llm-format:nth-child(3) h3 { color: #1565c0; } .dn_llm-format:nth-child(4) h3 { color: #e65100; } .dn_llm-format p { margin-bottom: var(--llm-spacing-md); } .dn_llm-format__example { background: var(--llm-white); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); font-family: monospace; font-size: 0.9rem; } .dn_llm-protip { background: #f5f5f5; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .dn_llm-protip h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-sm); } .dn_llm-protip p { margin: 0; } .dn_llm-testing { background: #2d2d2d; color: #f8f8f2; padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .dn_llm-testing h4 { color: var(--llm-white); margin-bottom: var(--llm-spacing-md); } .dn_llm-testing pre { margin: 0; font-family: 'Courier New', monospace; line-height: 1.6; } .dn_llm-benchmarks { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); color: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .dn_llm-benchmarks h4 { margin-bottom: var(--llm-spacing-lg); } .dn_llm-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-md); } .dn_llm-metric { background: rgba(255, 255, 255, 0.2); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); text-align: center; } .dn_llm-metric__value { font-size: 2rem; font-weight: 700; } .dn_llm-metric__label { margin: var(--llm-spacing-xs) 0 0; font-size: 0.9rem; } .dn_llm-playbook { padding: var(--llm-spacing-xl); } .dn_llm-playbook__phase { background: rgba(255, 255, 255, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-lg); } .dn_llm-playbook__phase h3 { margin-bottom: var(--llm-spacing-lg); } .dn_llm-playbook__phase ul { list-style: none; padding: 0; } .dn_llm-playbook__phase li { padding: var(--llm-spacing-sm) 0; } .dn_llm-mistakes { display: grid; gap: var(--llm-spacing-lg); } .dn_llm-mistake { background: #fff5f5; border: 2px solid var(--llm-accent); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .dn_llm-mistake h3 { color: var(--llm-accent); margin-bottom: var(--llm-spacing-md); } .dn_llm-mistake p { margin-bottom: var(--llm-spacing-sm); } .dn_llm-mistake p:last-child { margin-bottom: 0; } .dn_llm-footer { background: var(--llm-dark); color: var(--llm-white); padding: var(--llm-spacing-3xl) var(--llm-spacing-lg); animation: llm-fadeInUp 0.8s ease-out 0.6s both; } .dn_llm-author { background: rgba(255, 255, 255, 0.1); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); max-width: 900px; margin: 0 auto; } .dn_llm-author h2 { color: var(--llm-white); margin-bottom: var(--llm-spacing-lg); } .dn_llm-author p { color: var(--llm-white); line-height: 1.8; margin-bottom: var(--llm-spacing-md); } .dn_llm-author p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .dn_llm-meta__info { flex-direction: column; gap: var(--llm-spacing-sm); } .dn_llm-table { font-size: 0.875rem; } .dn_llm-table th, .dn_llm-table td { padding: var(--llm-spacing-sm); } .dn_llm-formats, .dn_llm-results, .dn_llm-metrics { grid-template-columns: 1fr; } .dn_llm-result__value { font-size: 2rem; } .dn_llm-metric__value { font-size: 1.5rem; } } @media (max-width: 480px) { .dn_llm-section { padding: var(--llm-spacing-2xl) var(--llm-spacing-md); } .dn_llm-hero { padding: var(--llm-spacing-3xl) var(--llm-spacing-md); } .dn_llm-section__title { font-size: 1.5rem; } .dn_llm-hero__title { font-size: 1.75rem; } } :root { --fs-primary: #194A9A; --fs-secondary: #2F62AD; --fs-blue: #348EDF; --fs-accent: #DF4756; --fs-dark: #011F4E; --fs-black: #000000; --fs-white: #FFFFFF; --fs-gray-50: #F9FAFB; --fs-gray-100: #F3F4F6; --fs-gray-200: #E5E7EB; --fs-gray-300: #D1D5DB; --fs-gray-600: #4B5563; --fs-gray-700: #374151; --fs-gray-800: #1F2937; --fs-spacing-xs: 4px; --fs-spacing-sm: 8px; --fs-spacing-md: 16px; --fs-spacing-lg: 24px; --fs-spacing-xl: 32px; --fs-spacing-2xl: 48px; --fs-spacing-3xl: 64px; --fs-spacing-4xl: 96px; --fs-radius: 14px; --fs-radius-sm: 8px; --fs-radius-lg: 20px; --fs-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --fs-shadow: 0 4px 6px rgba(0,0,0,0.1); --fs-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --fs-transition: 300ms ease; } @keyframes fs-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fs-wrapper { min-height: 100vh; background: var(--fs-white); color: var(--fs-black); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; } .fs-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--fs-spacing-lg); } .fs-hero { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); color: var(--fs-white); padding: clamp(var(--fs-spacing-3xl), 8vw, var(--fs-spacing-4xl)) var(--fs-spacing-lg); text-align: center; } .fs-hero__badge { display: inline-block; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--fs-spacing-sm) var(--fs-spacing-lg); border-radius: var(--fs-radius); font-size: clamp(0.875rem, 1.5vw, 1rem); margin-bottom: var(--fs-spacing-lg); animation: fs-fade-in-up 0.6s ease; } .fs-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin: 0 auto var(--fs-spacing-lg); max-width: 1000px; line-height: 1.2; animation: fs-fade-in-up 0.8s ease; } .fs-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); margin: 0 auto var(--fs-spacing-xl); max-width: 900px; opacity: 0.95; animation: fs-fade-in-up 1s ease; } .fs-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-spacing-lg); font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; animation: fs-fade-in-up 1.2s ease; } .fs-section { padding: var(--fs-spacing-3xl) 0; animation: fs-fade-in-up 0.8s ease; } .fs-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-xl); text-align: center; } .fs-section__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; color: var(--fs-dark); margin: var(--fs-spacing-xl) 0 var(--fs-spacing-lg); } .fs-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--fs-gray-700); margin-bottom: var(--fs-spacing-lg); } .fs-highlight { background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%); border-left: 4px solid var(--fs-accent); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); margin: var(--fs-spacing-xl) 0; } .fs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--fs-spacing-lg); } .fs-card { background: var(--fs-white); border-radius: var(--fs-radius); padding: var(--fs-spacing-xl); text-align: center; box-shadow: var(--fs-shadow); transition: transform var(--fs-transition), box-shadow var(--fs-transition); } .fs-card:hover { transform: translateY(-5px); box-shadow: var(--fs-shadow-lg); } .fs-card--geo { border-top: 4px solid var(--fs-blue); } .fs-card--seo { border-top: 4px solid var(--fs-primary); } .fs-card--aeo { border-top: 4px solid var(--fs-secondary); } .fs-card__icon { font-size: 3rem; margin-bottom: var(--fs-spacing-md); } .fs-card__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-card__description { color: var(--fs-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .fs-table-wrapper { overflow-x: auto; margin: var(--fs-spacing-xl) 0; } .fs-table { width: 100%; border-collapse: collapse; background: var(--fs-white); box-shadow: var(--fs-shadow-lg); border-radius: var(--fs-radius); overflow: hidden; } .fs-table thead { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); } .fs-table th { padding: var(--fs-spacing-md); color: var(--fs-white); font-weight: 600; text-align: left; } .fs-table td { padding: var(--fs-spacing-md); border-bottom: 1px solid var(--fs-gray-200); } .fs-table tbody tr:hover { background: var(--fs-gray-50); } .fs-table__highlight { background: #E3F2FD; } .fs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fs-spacing-lg); margin: var(--fs-spacing-xl) 0; } .fs-stat { background: linear-gradient(135deg, var(--fs-gray-50) 0%, var(--fs-white) 100%); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); text-align: center; border-top: 4px solid var(--fs-blue); box-shadow: var(--fs-shadow); transition: transform var(--fs-transition); } .fs-stat:hover { transform: translateY(-5px); box-shadow: var(--fs-shadow-lg); } .fs-stat__value { display: block; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-stat__label { color: var(--fs-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .fs-timeline { position: relative; padding: var(--fs-spacing-xl) 0; } .fs-timeline__item { display: grid; grid-template-columns: 150px 1fr; gap: var(--fs-spacing-xl); margin-bottom: var(--fs-spacing-2xl); align-items: center; } .fs-timeline__date { background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-blue) 100%); color: var(--fs-white); padding: var(--fs-spacing-sm) var(--fs-spacing-lg); border-radius: 50px; font-weight: 700; text-align: center; } .fs-timeline__content { background: var(--fs-white); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow); border-left: 4px solid var(--fs-blue); } .fs-timeline__content h3 { color: var(--fs-primary); margin-bottom: var(--fs-spacing-md); } .fs-timeline__content p { color: var(--fs-gray-700); margin-bottom: var(--fs-spacing-sm); } .fs-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--fs-spacing-xl); } .fs-matrix__cell { background: var(--fs-white); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow); text-align: center; } .fs-matrix__cell--geo { border-top: 4px solid var(--fs-blue); background: linear-gradient(135deg, #E3F2FD 0%, var(--fs-white) 100%); } .fs-matrix__cell--seo { border-top: 4px solid var(--fs-primary); background: linear-gradient(135deg, #EFF6FF 0%, var(--fs-white) 100%); } .fs-matrix__cell--aeo { border-top: 4px solid var(--fs-secondary); background: linear-gradient(135deg, #FFFBEB 0%, var(--fs-white) 100%); } .fs-matrix__title { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; color: var(--fs-dark); margin-bottom: var(--fs-spacing-md); } .fs-matrix__subtitle { margin-bottom: var(--fs-spacing-lg); } .fs-matrix__list { list-style: none; padding: 0; text-align: left; margin-bottom: var(--fs-spacing-lg); } .fs-matrix__list li { padding: var(--fs-spacing-sm) 0; color: var(--fs-gray-700); } .fs-matrix__highlight { background: var(--fs-white); padding: var(--fs-spacing-md); border-radius: var(--fs-radius-sm); margin-top: var(--fs-spacing-md); font-weight: 600; color: var(--fs-primary); } .fs-schema-stack { background: var(--fs-gray-50); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); } .fs-schema-stack__title { color: var(--fs-primary); margin-bottom: var(--fs-spacing-lg); } .fs-schema-stack__list { list-style: decimal; padding-left: var(--fs-spacing-lg); line-height: 2; } .fs-case { background: var(--fs-white); border-radius: var(--fs-radius); padding: var(--fs-spacing-xl); margin-bottom: var(--fs-spacing-xl); box-shadow: var(--fs-shadow); } .fs-case--success { background: linear-gradient(135deg, #D4EDDA 0%, var(--fs-white) 100%); border-left: 4px solid #28A745; } .fs-case--primary { background: linear-gradient(135deg, #F0F9FF 0%, var(--fs-white) 100%); border-left: 4px solid var(--fs-primary); } .fs-case__title { color: var(--fs-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--fs-spacing-lg); } .fs-case__challenge, .fs-case__solution { margin-bottom: var(--fs-spacing-md); color: var(--fs-gray-700); } .fs-case__results h4 { color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-case__results ul { list-style: none; padding: 0; } .fs-case__results li { padding: var(--fs-spacing-sm) 0; padding-left: var(--fs-spacing-lg); position: relative; } .fs-case__results li::before { content: "✓"; position: absolute; left: 0; color: var(--fs-blue); font-weight: 700; } .fs-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fs-spacing-lg); margin: var(--fs-spacing-xl) 0; } .fs-reason { background: var(--fs-gray-50); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); text-align: center; } .fs-reason__title { color: var(--fs-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--fs-spacing-sm); } .fs-reason__text { color: var(--fs-gray-600); } .fs-advantage { background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%); border-left: 4px solid var(--fs-accent); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); } .fs-advantage__title { color: var(--fs-dark); margin-bottom: var(--fs-spacing-lg); } .fs-advantage__list { list-style: none; padding: 0; line-height: 2; } .fs-advantage__list li { padding: var(--fs-spacing-sm) 0; } .fs-predictions { list-style: decimal; padding-left: var(--fs-spacing-lg); line-height: 2; } .fs-predictions li { padding: var(--fs-spacing-sm) 0; color: var(--fs-gray-700); } .fs-predictions strong { color: var(--fs-primary); } .fs-resources { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--fs-spacing-xl); } .fs-link { color: var(--fs-blue); text-decoration: none; transition: color var(--fs-transition); } .fs-link:hover { color: var(--fs-primary); text-decoration: underline; } .fs-link:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: var(--fs-radius-sm); } .fs-cta { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); color: var(--fs-white); padding: var(--fs-spacing-4xl) var(--fs-spacing-lg); text-align: center; } .fs-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--fs-spacing-lg); } .fs-cta__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: var(--fs-spacing-md); opacity: 0.95; } .fs-cta__text { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: var(--fs-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .fs-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--fs-spacing-lg); justify-content: center; margin-bottom: var(--fs-spacing-2xl); } .fs-button { display: inline-block; padding: var(--fs-spacing-md) var(--fs-spacing-xl); border-radius: 14px; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); text-decoration: none; transition: transform var(--fs-transition), box-shadow var(--fs-transition); } .fs-button--accent { background: var(--fs-accent); color: var(--fs-white); } .fs-button--accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(223, 71, 86, 0.3); } .fs-button--accent:focus-visible { outline: 3px solid var(--fs-white); outline-offset: 3px; } .fs-button--secondary { background: transparent; color: var(--fs-white); border: 2px solid var(--fs-white); } .fs-button--secondary:hover { background: var(--fs-white); color: var(--fs-primary); } .fs-button--secondary:focus-visible { outline: 3px solid var(--fs-white); outline-offset: 3px; } .fs-cta__contact { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .fs-footer { background: var(--fs-dark); color: var(--fs-white); padding: var(--fs-spacing-3xl) var(--fs-spacing-lg); text-align: center; } .fs-footer__title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--fs-spacing-lg); } .fs-footer__text { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--fs-spacing-lg); max-width: 800px; margin-left: auto; margin-right: auto; } .fs-footer__highlight { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--fs-blue); font-weight: 600; margin-bottom: var(--fs-spacing-xl); } .fs-footer__copyright { padding-top: var(--fs-spacing-xl); border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--fs-spacing-xl); font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.8; } @media (max-width: 768px) { .fs-timeline__item { grid-template-columns: 1fr; } .fs-timeline__date { margin-bottom: var(--fs-spacing-md); } .fs-matrix, .fs-cards, .fs-stats, .fs-reasons { grid-template-columns: 1fr; } .fs-table { font-size: 0.875rem; } .fs-table th, .fs-table td { padding: var(--fs-spacing-sm); } .fs-cta__buttons { flex-direction: column; align-items: center; } .fs-button { width: 100%; max-width: 300px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --fs-primary: #194A9A; --fs-secondary: #2F62AD; --fs-blue: #348EDF; --fs-accent: #DF4756; --fs-dark: #011F4E; --fs-black: #000000; --fs-white: #FFFFFF; --fs-gray-50: #F9FAFB; --fs-gray-100: #F3F4F6; --fs-gray-200: #E5E7EB; --fs-gray-300: #D1D5DB; --fs-gray-600: #4B5563; --fs-gray-700: #374151; --fs-gray-800: #1F2937; --fs-spacing-xs: 4px; --fs-spacing-sm: 8px; --fs-spacing-md: 16px; --fs-spacing-lg: 24px; --fs-spacing-xl: 32px; --fs-spacing-2xl: 48px; --fs-spacing-3xl: 64px; --fs-spacing-4xl: 96px; --fs-radius: 14px; --fs-radius-sm: 8px; --fs-radius-lg: 20px; --fs-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --fs-shadow: 0 4px 6px rgba(0,0,0,0.1); --fs-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --fs-transition: 300ms ease; } @keyframes fs-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fs-wrapper { min-height: 100vh; background: var(--fs-white); color: var(--fs-black); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; } .fs-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--fs-spacing-lg); } .fs-hero { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); color: var(--fs-white); padding: clamp(var(--fs-spacing-3xl), 8vw, var(--fs-spacing-4xl)) var(--fs-spacing-lg); text-align: center; } .fs-hero__badge { display: inline-block; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--fs-spacing-sm) var(--fs-spacing-lg); border-radius: var(--fs-radius); font-size: clamp(0.875rem, 1.5vw, 1rem); margin-bottom: var(--fs-spacing-lg); animation: fs-fade-in-up 0.6s ease; } .fs-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin: 0 auto var(--fs-spacing-lg); max-width: 1000px; line-height: 1.2; animation: fs-fade-in-up 0.8s ease; } .fs-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); margin: 0 auto var(--fs-spacing-xl); max-width: 900px; opacity: 0.95; animation: fs-fade-in-up 1s ease; } .fs-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-spacing-lg); font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; animation: fs-fade-in-up 1.2s ease; } .fs-section { padding: var(--fs-spacing-3xl) 0; animation: fs-fade-in-up 0.8s ease; } .fs-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-xl); text-align: center; } .fs-section__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; color: var(--fs-dark); margin: var(--fs-spacing-xl) 0 var(--fs-spacing-lg); } .fs-section__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--fs-gray-700); margin-bottom: var(--fs-spacing-lg); } .fs-highlight { background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%); border-left: 4px solid var(--fs-accent); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); margin: var(--fs-spacing-xl) 0; } .fs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--fs-spacing-lg); } .fs-card { background: var(--fs-white); border-radius: var(--fs-radius); padding: var(--fs-spacing-xl); text-align: center; box-shadow: var(--fs-shadow); transition: transform var(--fs-transition), box-shadow var(--fs-transition); } .fs-card:hover { transform: translateY(-5px); box-shadow: var(--fs-shadow-lg); } .fs-card--geo { border-top: 4px solid var(--fs-blue); } .fs-card--seo { border-top: 4px solid var(--fs-primary); } .fs-card--aeo { border-top: 4px solid var(--fs-secondary); } .fs-card__icon { font-size: 3rem; margin-bottom: var(--fs-spacing-md); } .fs-card__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-card__description { color: var(--fs-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .fs-table-wrapper { overflow-x: auto; margin: var(--fs-spacing-xl) 0; } .fs-table { width: 100%; border-collapse: collapse; background: var(--fs-white); box-shadow: var(--fs-shadow-lg); border-radius: var(--fs-radius); overflow: hidden; } .fs-table thead { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); } .fs-table th { padding: var(--fs-spacing-md); color: var(--fs-white); font-weight: 600; text-align: left; } .fs-table td { padding: var(--fs-spacing-md); border-bottom: 1px solid var(--fs-gray-200); } .fs-table tbody tr:hover { background: var(--fs-gray-50); } .fs-table__highlight { background: #E3F2FD; } .fs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fs-spacing-lg); margin: var(--fs-spacing-xl) 0; } .fs-stat { background: linear-gradient(135deg, var(--fs-gray-50) 0%, var(--fs-white) 100%); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); text-align: center; border-top: 4px solid var(--fs-blue); box-shadow: var(--fs-shadow); transition: transform var(--fs-transition); } .fs-stat:hover { transform: translateY(-5px); box-shadow: var(--fs-shadow-lg); } .fs-stat__value { display: block; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-stat__label { color: var(--fs-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .fs-timeline { position: relative; padding: var(--fs-spacing-xl) 0; } .fs-timeline__item { display: grid; grid-template-columns: 150px 1fr; gap: var(--fs-spacing-xl); margin-bottom: var(--fs-spacing-2xl); align-items: center; } .fs-timeline__date { background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-blue) 100%); color: var(--fs-white); padding: var(--fs-spacing-sm) var(--fs-spacing-lg); border-radius: 50px; font-weight: 700; text-align: center; } .fs-timeline__content { background: var(--fs-white); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow); border-left: 4px solid var(--fs-blue); } .fs-timeline__content h3 { color: var(--fs-primary); margin-bottom: var(--fs-spacing-md); } .fs-timeline__content p { color: var(--fs-gray-700); margin-bottom: var(--fs-spacing-sm); } .fs-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--fs-spacing-xl); } .fs-matrix__cell { background: var(--fs-white); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow); text-align: center; } .fs-matrix__cell--geo { border-top: 4px solid var(--fs-blue); background: linear-gradient(135deg, #E3F2FD 0%, var(--fs-white) 100%); } .fs-matrix__cell--seo { border-top: 4px solid var(--fs-primary); background: linear-gradient(135deg, #EFF6FF 0%, var(--fs-white) 100%); } .fs-matrix__cell--aeo { border-top: 4px solid var(--fs-secondary); background: linear-gradient(135deg, #FFFBEB 0%, var(--fs-white) 100%); } .fs-matrix__title { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; color: var(--fs-dark); margin-bottom: var(--fs-spacing-md); } .fs-matrix__subtitle { margin-bottom: var(--fs-spacing-lg); } .fs-matrix__list { list-style: none; padding: 0; text-align: left; margin-bottom: var(--fs-spacing-lg); } .fs-matrix__list li { padding: var(--fs-spacing-sm) 0; color: var(--fs-gray-700); } .fs-matrix__highlight { background: var(--fs-white); padding: var(--fs-spacing-md); border-radius: var(--fs-radius-sm); margin-top: var(--fs-spacing-md); font-weight: 600; color: var(--fs-primary); } .fs-schema-stack { background: var(--fs-gray-50); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); } .fs-schema-stack__title { color: var(--fs-primary); margin-bottom: var(--fs-spacing-lg); } .fs-schema-stack__list { list-style: decimal; padding-left: var(--fs-spacing-lg); line-height: 2; } .fs-case { background: var(--fs-white); border-radius: var(--fs-radius); padding: var(--fs-spacing-xl); margin-bottom: var(--fs-spacing-xl); box-shadow: var(--fs-shadow); } .fs-case--success { background: linear-gradient(135deg, #D4EDDA 0%, var(--fs-white) 100%); border-left: 4px solid #28A745; } .fs-case--primary { background: linear-gradient(135deg, #F0F9FF 0%, var(--fs-white) 100%); border-left: 4px solid var(--fs-primary); } .fs-case__title { color: var(--fs-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--fs-spacing-lg); } .fs-case__challenge, .fs-case__solution { margin-bottom: var(--fs-spacing-md); color: var(--fs-gray-700); } .fs-case__results h4 { color: var(--fs-primary); margin-bottom: var(--fs-spacing-sm); } .fs-case__results ul { list-style: none; padding: 0; } .fs-case__results li { padding: var(--fs-spacing-sm) 0; padding-left: var(--fs-spacing-lg); position: relative; } .fs-case__results li::before { content: "✓"; position: absolute; left: 0; color: var(--fs-blue); font-weight: 700; } .fs-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fs-spacing-lg); margin: var(--fs-spacing-xl) 0; } .fs-reason { background: var(--fs-gray-50); padding: var(--fs-spacing-lg); border-radius: var(--fs-radius); text-align: center; } .fs-reason__title { color: var(--fs-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--fs-spacing-sm); } .fs-reason__text { color: var(--fs-gray-600); } .fs-advantage { background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%); border-left: 4px solid var(--fs-accent); padding: var(--fs-spacing-xl); border-radius: var(--fs-radius); } .fs-advantage__title { color: var(--fs-dark); margin-bottom: var(--fs-spacing-lg); } .fs-advantage__list { list-style: none; padding: 0; line-height: 2; } .fs-advantage__list li { padding: var(--fs-spacing-sm) 0; } .fs-predictions { list-style: decimal; padding-left: var(--fs-spacing-lg); line-height: 2; } .fs-predictions li { padding: var(--fs-spacing-sm) 0; color: var(--fs-gray-700); } .fs-predictions strong { color: var(--fs-primary); } .fs-resources { list-style: none; padding: 0; line-height: 2; margin-bottom: var(--fs-spacing-xl); } .fs-link { color: var(--fs-blue); text-decoration: none; transition: color var(--fs-transition); } .fs-link:hover { color: var(--fs-primary); text-decoration: underline; } .fs-link:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: var(--fs-radius-sm); } .fs-cta { background: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-primary) 100%); color: var(--fs-white); padding: var(--fs-spacing-4xl) var(--fs-spacing-lg); text-align: center; } .fs-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--fs-spacing-lg); } .fs-cta__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: var(--fs-spacing-md); opacity: 0.95; } .fs-cta__text { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: var(--fs-spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } .fs-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--fs-spacing-lg); justify-content: center; margin-bottom: var(--fs-spacing-2xl); } .fs-button { display: inline-block; padding: var(--fs-spacing-md) var(--fs-spacing-xl); border-radius: 14px; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.125rem); text-decoration: none; transition: transform var(--fs-transition), box-shadow var(--fs-transition); } .fs-button--accent { background: var(--fs-accent); color: var(--fs-white); } .fs-button--accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(223, 71, 86, 0.3); } .fs-button--accent:focus-visible { outline: 3px solid var(--fs-white); outline-offset: 3px; } .fs-button--secondary { background: transparent; color: var(--fs-white); border: 2px solid var(--fs-white); } .fs-button--secondary:hover { background: var(--fs-white); color: var(--fs-primary); } .fs-button--secondary:focus-visible { outline: 3px solid var(--fs-white); outline-offset: 3px; } .fs-cta__contact { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .fs-footer { background: var(--fs-dark); color: var(--fs-white); padding: var(--fs-spacing-3xl) var(--fs-spacing-lg); text-align: center; } .fs-footer__title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--fs-spacing-lg); } .fs-footer__text { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--fs-spacing-lg); max-width: 800px; margin-left: auto; margin-right: auto; } .fs-footer__highlight { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--fs-blue); font-weight: 600; margin-bottom: var(--fs-spacing-xl); } .fs-footer__copyright { padding-top: var(--fs-spacing-xl); border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--fs-spacing-xl); font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.8; } @media (max-width: 768px) { .fs-timeline__item { grid-template-columns: 1fr; } .fs-timeline__date { margin-bottom: var(--fs-spacing-md); } .fs-matrix, .fs-cards, .fs-stats, .fs-reasons { grid-template-columns: 1fr; } .fs-table { font-size: 0.875rem; } .fs-table th, .fs-table td { padding: var(--fs-spacing-sm); } .fs-cta__buttons { flex-direction: column; align-items: center; } .fs-button { width: 100%; max-width: 300px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-geo-primary: #194A9A; --dn-geo-secondary: #2F62AD; --dn-geo-blue: #348EDF; --dn-geo-accent: #DF4756; --dn-geo-dark: #011F4E; --dn-geo-black: #000000; --dn-geo-white: #FFFFFF; --dn-geo-spacing-xs: 4px; --dn-geo-spacing-sm: 8px; --dn-geo-spacing-md: 16px; --dn-geo-spacing-lg: 24px; --dn-geo-spacing-xl: 32px; --dn-geo-spacing-2xl: 48px; --dn-geo-spacing-3xl: 64px; --dn-geo-spacing-4xl: 96px; --dn-geo-radius: 14px; --dn-geo-radius-sm: 8px; --dn-geo-radius-lg: 20px; --dn-geo-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-geo-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-geo-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-geo-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn-geo-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn_page-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dn-geo-black); background: var(--dn-geo-white); min-height: 100vh; } .dn_hero { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); padding: clamp(var(--dn-geo-spacing-3xl), 8vw, var(--dn-geo-spacing-4xl)) var(--dn-geo-spacing-lg); text-align: center; position: relative; overflow: hidden; } .dn_hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .dn_hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; animation: dn-geo-fadeInUp 0.8s ease; } .dn_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-geo-white); margin-bottom: var(--dn-geo-spacing-lg); line-height: 1.2; } .dn_hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-geo-white); opacity: 0.95; margin-bottom: var(--dn-geo-spacing-2xl); max-width: 900px; margin-left: auto; margin-right: auto; } .dn_hero__meta { display: flex; gap: var(--dn-geo-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_hero__meta-item { color: var(--dn-geo-white); opacity: 0.9; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_breadcrumb { background: #f8f9fa; padding: var(--dn-geo-spacing-md) 0; border-bottom: 1px solid #e9ecef; } .dn_breadcrumb__link { color: var(--dn-geo-primary); text-decoration: none; transition: var(--dn-geo-transition); } .dn_breadcrumb__link:hover { color: var(--dn-geo-blue); text-decoration: underline; } .dn_breadcrumb__link:focus-visible { outline: 2px solid var(--dn-geo-blue); outline-offset: 2px; border-radius: var(--dn-geo-radius-sm); } .dn_breadcrumb__separator { margin: 0 var(--dn-geo-spacing-sm); color: #6c757d; } .dn_breadcrumb__current { color: #6c757d; } .dn_content { padding: var(--dn-geo-spacing-3xl) 0; background: #f8f9fa; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-geo-spacing-lg); } .dn_section { background: var(--dn-geo-white); border-radius: var(--dn-geo-radius-lg); padding: var(--dn-geo-spacing-3xl); margin-bottom: var(--dn-geo-spacing-2xl); box-shadow: var(--dn-geo-shadow-md); } .dn_section--fade { animation: dn-geo-fadeInUp 0.8s ease; animation-fill-mode: both; } .dn_section--resources { background: linear-gradient(135deg, #f8f9fa 0%, var(--dn-geo-white) 100%); } .dn_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-2xl); font-weight: 700; padding-bottom: var(--dn-geo-spacing-md); border-bottom: 3px solid var(--dn-geo-primary); } .dn_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--dn-geo-primary); margin: var(--dn-geo-spacing-2xl) 0 var(--dn-geo-spacing-lg); font-weight: 600; } .dn_section__lead { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.7; color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-xl); } .dn_section p { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.8; color: #374151; margin-bottom: var(--dn-geo-spacing-lg); } .dn_section h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--dn-geo-primary); margin: var(--dn-geo-spacing-2xl) 0 var(--dn-geo-spacing-lg); font-weight: 600; } .dn_section h4 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-dark); margin: var(--dn-geo-spacing-xl) 0 var(--dn-geo-spacing-md); font-weight: 600; } .dn_alert { padding: var(--dn-geo-spacing-lg); border-radius: var(--dn-geo-radius); margin: var(--dn-geo-spacing-xl) 0; border-left: 4px solid; } .dn_alert--info { background: #eff6ff; border-color: var(--dn-geo-blue); color: var(--dn-geo-dark); } .dn_alert--success { background: #f0fdf4; border-color: #22c55e; color: #166534; } .dn_alert--warning { background: #fefce8; border-color: #facc15; color: #854d0e; } .dn_alert--pro { background: linear-gradient(135deg, rgba(25,74,154,0.05) 0%, rgba(52,142,223,0.05) 100%); border-color: var(--dn-geo-primary); color: var(--dn-geo-dark); } .dn_timeline { display: grid; gap: var(--dn-geo-spacing-lg); margin: var(--dn-geo-spacing-xl) 0; } .dn_timeline__item { background: #f8f9fa; padding: var(--dn-geo-spacing-lg); border-radius: var(--dn-geo-radius); border-left: 4px solid var(--dn-geo-blue); transition: var(--dn-geo-transition); } .dn_timeline__item:hover { transform: translateX(5px); box-shadow: var(--dn-geo-shadow-sm); } .dn_timeline__header { font-weight: 600; color: var(--dn-geo-primary); margin-bottom: var(--dn-geo-spacing-sm); } .dn_timeline__content { color: #6c757d; } .dn_timeline--process .dn_timeline__item { background: linear-gradient(135deg, #eff6ff 0%, #f8f9fa 100%); } .dn_list { margin: var(--dn-geo-spacing-lg) 0; padding-left: var(--dn-geo-spacing-xl); line-height: 1.8; } .dn_list--ordered { list-style-type: decimal; } .dn_list--highlight { background: #f8f9fa; padding: var(--dn-geo-spacing-lg); border-radius: var(--dn-geo-radius); } .dn_list--check { list-style: none; padding-left: 0; } .dn_list--check li { position: relative; padding-left: var(--dn-geo-spacing-xl); margin-bottom: var(--dn-geo-spacing-sm); } .dn_list--check li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-geo-blue); font-weight: 700; font-size: 1.25rem; } .dn_table-wrapper { overflow-x: auto; margin: var(--dn-geo-spacing-xl) 0; } .dn_table { width: 100%; border-collapse: collapse; background: var(--dn-geo-white); border-radius: var(--dn-geo-radius); overflow: hidden; box-shadow: var(--dn-geo-shadow-md); } .dn_table thead { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); } .dn_table th { padding: var(--dn-geo-spacing-lg); text-align: left; color: var(--dn-geo-white); font-weight: 600; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_table tbody tr { border-bottom: 1px solid #e9ecef; } .dn_table tbody tr:hover { background: #f8f9fa; } .dn_table td { padding: var(--dn-geo-spacing-md); color: #374151; font-size: clamp(0.875rem, 1.1vw, 1rem); } .dn_table__highlight { color: var(--dn-geo-blue); font-weight: 600; } .dn_stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-geo-spacing-lg); margin: var(--dn-geo-spacing-xl) 0; } .dn_stat-card { background: linear-gradient(135deg, #f8f9fa 0%, var(--dn-geo-white) 100%); padding: var(--dn-geo-spacing-xl); border-radius: var(--dn-geo-radius); text-align: center; border: 2px solid #e9ecef; transition: var(--dn-geo-transition); } .dn_stat-card:hover { transform: translateY(-5px); box-shadow: var(--dn-geo-shadow-lg); border-color: var(--dn-geo-blue); } .dn_stat-card__icon { font-size: 2rem; margin-bottom: var(--dn-geo-spacing-md); } .dn_stat-card__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-geo-primary); margin-bottom: var(--dn-geo-spacing-sm); } .dn_stat-card__label { color: #6c757d; font-size: clamp(0.875rem, 1vw, 1rem); margin-bottom: var(--dn-geo-spacing-sm); } .dn_stat-card__description { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-geo-dark); } .dn_code-block { background: var(--dn-geo-dark); color: #e2e8f0; padding: var(--dn-geo-spacing-xl); border-radius: var(--dn-geo-radius); margin: var(--dn-geo-spacing-xl) 0; overflow-x: auto; font-family: 'Monaco', 'Courier New', monospace; font-size: clamp(0.875rem, 1vw, 1rem); } .dn_code-block pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; } .dn_card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-geo-spacing-lg); margin: var(--dn-geo-spacing-xl) 0; } .dn_card { background: var(--dn-geo-white); border: 2px solid #e9ecef; border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); transition: var(--dn-geo-transition); } .dn_card:hover { transform: translateY(-5px); box-shadow: var(--dn-geo-shadow-lg); border-color: var(--dn-geo-blue); } .dn_card__icon { font-size: 2rem; margin-bottom: var(--dn-geo-spacing-md); } .dn_card__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-primary); margin-bottom: var(--dn-geo-spacing-md); font-weight: 600; } .dn_card__text { color: #6c757d; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.6; } .dn_checklist-wrapper { background: linear-gradient(135deg, rgba(25,74,154,0.03) 0%, rgba(52,142,223,0.03) 100%); border-radius: var(--dn-geo-radius-lg); padding: var(--dn-geo-spacing-2xl); margin: var(--dn-geo-spacing-xl) 0; } .dn_checklist { background: var(--dn-geo-white); border-radius: var(--dn-geo-radius); padding: var(--dn-geo-spacing-xl); box-shadow: var(--dn-geo-shadow-sm); } .dn_checklist__title { font-size: clamp(1.5rem, 2vw, 1.75rem); color: var(--dn-geo-dark); margin-bottom: var(--dn-geo-spacing-xl); text-align: center; font-weight: 700; } .dn_checklist__section { margin-bottom: var(--dn-geo-spacing-2xl); } .dn_checklist__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-geo-primary); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 600; } .dn_checklist__list { list-style: none; padding: 0; line-height: 2; } .dn_checklist__list li { padding: var(--dn-geo-spacing-sm) 0; font-size: clamp(0.875rem, 1vw, 1rem); } .dn_cta-section { padding: var(--dn-geo-spacing-3xl) 0; } .dn_cta { background: linear-gradient(135deg, var(--dn-geo-dark) 0%, var(--dn-geo-primary) 100%); border-radius: var(--dn-geo-radius-lg); padding: var(--dn-geo-spacing-3xl); text-align: center; color: var(--dn-geo-white); position: relative; overflow: hidden; box-shadow: var(--dn-geo-shadow-lg); } .dn_cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .dn_cta > * { position: relative; z-index: 1; } .dn_cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--dn-geo-spacing-lg); font-weight: 700; } .dn_cta__subtitle { font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-geo-spacing-2xl); opacity: 0.95; max-width: 800px; margin-left: auto; margin-right: auto; } .dn_cta__buttons { display: flex; gap: var(--dn-geo-spacing-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-geo-spacing-xl); } .dn_btn { padding: var(--dn-geo-spacing-md) var(--dn-geo-spacing-2xl); border-radius: var(--dn-geo-radius); text-decoration: none; font-weight: 600; transition: var(--dn-geo-transition); display: inline-block; font-size: clamp(1rem, 1.2vw, 1.125rem); cursor: pointer; border: 2px solid transparent; } .dn_btn--primary { background: var(--dn-geo-accent); color: var(--dn-geo-white); } .dn_btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,71,86,0.4); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-geo-white); outline-offset: 3px; } .dn_btn--secondary { background: var(--dn-geo-white); color: var(--dn-geo-primary); } .dn_btn--secondary:hover { background: #f8f9fa; transform: translateY(-2px); } .dn_btn--secondary:focus-visible { outline: 3px solid var(--dn-geo-white); outline-offset: 3px; } .dn_cta__note { font-size: clamp(0.875rem, 1vw, 1rem); opacity: 0.9; } .dn_link { color: var(--dn-geo-blue); text-decoration: none; transition: var(--dn-geo-transition); } .dn_link:hover { color: var(--dn-geo-primary); text-decoration: underline; } .dn_link:focus-visible { outline: 2px solid var(--dn-geo-blue); outline-offset: 2px; border-radius: var(--dn-geo-radius-sm); } .dn_footer { background: var(--dn-geo-dark); color: var(--dn-geo-white); padding: var(--dn-geo-spacing-3xl) 0; margin-top: var(--dn-geo-spacing-4xl); } .dn_footer__content { text-align: center; } .dn_footer__brand { margin-bottom: var(--dn-geo-spacing-xl); } .dn_footer__title { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-geo-spacing-sm); font-weight: 600; } .dn_footer__tagline { color: #94a3b8; font-size: clamp(1rem, 1.2vw, 1.125rem); } .dn_footer__contact { margin-bottom: var(--dn-geo-spacing-xl); } .dn_footer__contact p { margin-bottom: var(--dn-geo-spacing-sm); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_footer__copyright { padding-top: var(--dn-geo-spacing-xl); border-top: 1px solid rgba(255,255,255,0.1); } .dn_footer__copyright p { color: #64748b; font-size: clamp(0.875rem, 1vw, 1rem); } @media (max-width: 768px) { .dn_section { padding: var(--dn-geo-spacing-xl); } .dn_stats-grid, .dn_card-grid { grid-template-columns: 1fr; } .dn_table { font-size: 0.875rem; } .dn_table th, .dn_table td { padding: var(--dn-geo-spacing-sm); } .dn_hero__meta { flex-direction: column; gap: var(--dn-geo-spacing-sm); } .dn_cta__buttons { flex-direction: column; } .dn_btn { width: 100%; text-align: center; } } @media (max-width: 480px) { .dn_section { padding: var(--dn-geo-spacing-lg); } .dn_container { padding: 0 var(--dn-geo-spacing-md); } .dn_checklist-wrapper { padding: var(--dn-geo-spacing-lg); } .dn_checklist { padding: var(--dn-geo-spacing-lg); } } :root { --ai-primary: #194A9A; --ai-secondary: #2F62AD; --ai-blue: #348EDF; --ai-accent: #DF4756; --ai-dark: #011F4E; --ai-black: #000000; --ai-white: #FFFFFF; --ai-gray-100: #F8F9FA; --ai-gray-200: #E9ECEF; --ai-gray-300: #DEE2E6; --ai-gray-600: #6B7280; --ai-gray-700: #374151; --ai-spacing-xs: 4px; --ai-spacing-sm: 8px; --ai-spacing-md: 16px; --ai-spacing-lg: 24px; --ai-spacing-xl: 32px; --ai-spacing-2xl: 48px; --ai-spacing-3xl: 64px; --ai-spacing-4xl: 96px; --ai-radius: 14px; --ai-radius-sm: 8px; --ai-radius-lg: 20px; --ai-radius-full: 50px; --ai-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --ai-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --ai-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --ai-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes ai-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .ai-page-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--ai-black); background: var(--ai-white); } .ai-hero { background: linear-gradient(135deg, var(--ai-dark) 0%, var(--ai-primary) 100%); padding: clamp(var(--ai-spacing-3xl), 8vw, var(--ai-spacing-4xl)) var(--ai-spacing-lg); position: relative; overflow: hidden; } .ai-hero::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.15) 0%, transparent 70%); pointer-events: none; } .ai-hero__content { position: relative; z-index: 1; text-align: center; max-width: 1000px; margin: 0 auto; animation: ai-fadeInUp 0.8s ease; } .ai-hero__title { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 700; color: var(--ai-white); margin-bottom: var(--ai-spacing-lg); line-height: 1.3; } .ai-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--ai-spacing-xl); font-weight: 400; } .ai-hero__badges { display: flex; gap: var(--ai-spacing-md); justify-content: center; flex-wrap: wrap; } .ai-badge { display: inline-flex; align-items: center; padding: var(--ai-spacing-sm) var(--ai-spacing-lg); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--ai-radius-full); color: var(--ai-white); font-weight: 600; transition: var(--ai-transition); font-size: clamp(0.875rem, 1.5vw, 1rem); } .ai-badge:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .ai-section { padding: var(--ai-spacing-3xl) 0; animation: ai-fadeInUp 1s ease; } .ai-section--intro { background: var(--ai-gray-100); } .ai-section--architecture { background: var(--ai-white); } .ai-section--core { background: var(--ai-gray-100); } .ai-section--memory { background: var(--ai-white); } .ai-section--vector { background: var(--ai-gray-100); } .ai-section--gmb { background: var(--ai-white); } .ai-section--aeo { background: var(--ai-gray-100); } .ai-section--results { background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-secondary) 100%); color: var(--ai-white); } .ai-section--implementation { background: var(--ai-white); } .ai-section--working-memory { background: var(--ai-gray-100); } .ai-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--ai-dark); text-align: center; margin-bottom: var(--ai-spacing-2xl); } .ai-section--results .ai-section__title { color: var(--ai-white); } .ai-section__content { max-width: 900px; margin: 0 auto; } .ai-section__content p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--ai-spacing-lg); color: var(--ai-gray-700); } .ai-section__lead { font-size: clamp(1.125rem, 1.8vw, 1.25rem); text-align: center; color: var(--ai-gray-700); margin: var(--ai-spacing-xl) auto; max-width: 800px; } .ai-architecture__image { text-align: center; margin: var(--ai-spacing-2xl) 0; } .ai-architecture__image img { max-width: 100%; height: auto; border-radius: var(--ai-radius); box-shadow: var(--ai-shadow-lg); } .ai-components-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ai-spacing-xl); margin-bottom: var(--ai-spacing-xl); } .ai-component { display: flex; gap: var(--ai-spacing-lg); align-items: flex-start; padding: var(--ai-spacing-lg); background: var(--ai-white); border-radius: var(--ai-radius); box-shadow: var(--ai-shadow-sm); transition: var(--ai-transition); } .ai-component:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow-md); } .ai-component__icon { font-size: 2rem; line-height: 1; } .ai-component__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-sm); } .ai-component__desc { font-size: clamp(0.875rem, 1.2vw, 1rem); color: var(--ai-gray-700); line-height: 1.6; } .ai-highlight-box { background: linear-gradient(135deg, var(--ai-blue), var(--ai-secondary)); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); margin-top: var(--ai-spacing-xl); color: var(--ai-white); } .ai-highlight-box__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--ai-spacing-md); } .ai-highlight-box__text { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; } .ai-memory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ai-spacing-lg); margin-bottom: var(--ai-spacing-xl); } .ai-memory-card { background: linear-gradient(135deg, var(--ai-white), var(--ai-gray-100)); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); border: 2px solid var(--ai-gray-200); transition: var(--ai-transition); } .ai-memory-card:hover { transform: translateY(-4px); border-color: var(--ai-blue); box-shadow: var(--ai-shadow-md); } .ai-memory-card__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-md); } .ai-memory-card__text { font-size: clamp(0.875rem, 1.2vw, 1rem); color: var(--ai-gray-700); line-height: 1.6; } .ai-tags { display: flex; gap: var(--ai-spacing-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--ai-spacing-xl); } .ai-tag { display: inline-block; padding: var(--ai-spacing-sm) var(--ai-spacing-md); background: var(--ai-blue); color: var(--ai-white); border-radius: var(--ai-radius-sm); font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600; } .ai-vector-content { max-width: 900px; margin: 0 auto; } .ai-vector-block { background: var(--ai-white); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); margin-bottom: var(--ai-spacing-lg); box-shadow: var(--ai-shadow-sm); } .ai-vector-block__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-md); } .ai-vector-block__text { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ai-gray-700); line-height: 1.6; } .ai-list { list-style: none; padding: 0; margin: var(--ai-spacing-lg) 0; } .ai-list li { position: relative; padding-left: var(--ai-spacing-xl); margin-bottom: var(--ai-spacing-md); font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ai-gray-700); } .ai-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ai-blue); font-weight: 700; font-size: 1.25rem; } .ai-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ai-spacing-lg); } .ai-feature { background: var(--ai-gray-100); padding: var(--ai-spacing-lg); border-radius: var(--ai-radius); transition: var(--ai-transition); border-left: 4px solid var(--ai-blue); } .ai-feature:hover { transform: translateX(4px); box-shadow: var(--ai-shadow-sm); } .ai-feature__title { font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-sm); } .ai-feature__text { font-size: clamp(0.875rem, 1.1vw, 1rem); color: var(--ai-gray-700); line-height: 1.5; } .ai-aeo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ai-spacing-lg); } .ai-aeo-card { background: var(--ai-white); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); text-align: center; box-shadow: var(--ai-shadow-sm); transition: var(--ai-transition); } .ai-aeo-card:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow-lg); } .ai-aeo-card__icon { font-size: 2.5rem; margin-bottom: var(--ai-spacing-md); display: block; } .ai-aeo-card__title { font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-md); } .ai-aeo-card__text { font-size: clamp(0.875rem, 1.1vw, 1rem); color: var(--ai-gray-700); line-height: 1.5; } .ai-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ai-spacing-xl); max-width: 900px; margin: 0 auto; } .ai-stat { text-align: center; background: rgba(255, 255, 255, 0.1); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); backdrop-filter: blur(10px); transition: var(--ai-transition); } .ai-stat:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.15); } .ai-stat__icon { font-size: 2.5rem; margin-bottom: var(--ai-spacing-md); display: block; } .ai-stat__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--ai-white); margin-bottom: var(--ai-spacing-sm); } .ai-stat__label { font-size: clamp(0.875rem, 1.2vw, 1rem); color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 1px; } .ai-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ai-spacing-xl); } .ai-phase { display: flex; gap: var(--ai-spacing-lg); align-items: flex-start; } .ai-phase__number { width: 48px; height: 48px; background: linear-gradient(135deg, var(--ai-primary), var(--ai-blue)); color: var(--ai-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; flex-shrink: 0; } .ai-phase__content { flex: 1; } .ai-phase__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-sm); } .ai-phase__text { font-size: clamp(0.875rem, 1.2vw, 1rem); color: var(--ai-gray-700); line-height: 1.5; margin-bottom: var(--ai-spacing-md); } .ai-phase__tags { display: flex; gap: var(--ai-spacing-sm); flex-wrap: wrap; } .ai-memory-table { background: var(--ai-white); padding: var(--ai-spacing-xl); border-radius: var(--ai-radius); box-shadow: var(--ai-shadow-sm); max-width: 600px; margin: 0 auto; } .ai-memory-table__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ai-primary); margin-bottom: var(--ai-spacing-lg); text-align: center; } .ai-table { width: 100%; border-collapse: collapse; } .ai-table td { padding: var(--ai-spacing-md); border-bottom: 1px solid var(--ai-gray-200); } .ai-table td:first-child { color: var(--ai-gray-700); font-weight: 600; } .ai-table td:last-child { color: var(--ai-blue); text-align: right; font-weight: 700; } .ai-table tr:last-child td { border-bottom: none; } .ai-cta { background: linear-gradient(135deg, var(--ai-accent) 0%, var(--ai-dark) 100%); padding: var(--ai-spacing-4xl) var(--ai-spacing-lg); text-align: center; position: relative; overflow: hidden; } .ai-cta::before { content: ''; position: absolute; top: -50%; left: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); pointer-events: none; } .ai-cta > * { position: relative; z-index: 1; } .ai-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--ai-white); margin-bottom: var(--ai-spacing-lg); } .ai-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--ai-spacing-2xl); } .ai-cta__button { display: inline-block; padding: var(--ai-spacing-md) var(--ai-spacing-2xl); background: var(--ai-white); color: var(--ai-accent); border-radius: var(--ai-radius); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; text-decoration: none; transition: var(--ai-transition); } .ai-cta__button:hover { transform: translateY(-2px); box-shadow: var(--ai-shadow-lg); background: var(--ai-gray-100); } .ai-cta__button:focus-visible { outline: 3px solid var(--ai-white); outline-offset: 3px; } .ai-cta__contacts { margin-top: var(--ai-spacing-xl); display: flex; gap: var(--ai-spacing-xl); justify-content: center; flex-wrap: wrap; } .ai-cta__contact { color: var(--ai-white); font-size: clamp(0.875rem, 1.3vw, 1rem); } @media (max-width: 768px) { .ai-components-grid, .ai-memory-grid, .ai-features-grid, .ai-aeo-cards, .ai-stats-grid, .ai-phases { grid-template-columns: 1fr; } .ai-phase { flex-direction: column; align-items: center; text-align: center; } .ai-section { padding: var(--ai-spacing-2xl) var(--ai-spacing-md); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-light: #f8f9fa; --dn-gray-medium: #e5e7eb; --dn-gray-dark: #6b7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius-sm: 8px; --dn-radius-md: 12px; --dn-radius-lg: 16px; --dn-radius-btn: 14px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_page { min-height: 100vh; background: var(--dn-white); } .dn_hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; position: relative; overflow: hidden; } .dn_hero__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); animation: dn_fadeInUp 0.8s ease-out; } .dn_hero__content { text-align: center; max-width: 900px; margin: 0 auto; } .dn_hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-white); opacity: 0.95; margin-bottom: var(--dn-spacing-2xl); line-height: 1.5; } .dn_hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-lg); margin-top: var(--dn-spacing-2xl); } .dn_stat-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; transition: all var(--dn-transition); } .dn_stat-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_stat-card__number { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-sm); } .dn_stat-card__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-white); opacity: 0.9; } .dn_problem-solution { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_section-title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-3xl); } .dn_section-subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-gray-dark); text-align: center; margin-bottom: var(--dn-spacing-2xl); margin-top: -var(--dn-spacing-lg); } .dn_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-2xl); } .dn_comparison__side { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); transition: all var(--dn-transition); } .dn_comparison__side--problem { border-top: 4px solid var(--dn-accent); } .dn_comparison__side--solution { border-top: 4px solid var(--dn-blue); } .dn_comparison__side:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_comparison__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-lg); } .dn_comparison__side--problem .dn_comparison__title { color: var(--dn-accent); } .dn_comparison__side--solution .dn_comparison__title { color: var(--dn-blue); } .dn_comparison__list { list-style: none; padding: 0; margin: 0; } .dn_comparison__item { display: flex; align-items: flex-start; gap: var(--dn-spacing-sm); padding: var(--dn-spacing-sm) 0; line-height: 1.5; } .dn_comparison__icon { flex-shrink: 0; font-size: 1.25rem; margin-top: 2px; } .dn_comparison__icon--negative { color: var(--dn-accent); } .dn_comparison__icon--positive { color: var(--dn-blue); } .dn_cta-section { text-align: center; margin-top: var(--dn-spacing-2xl); } .dn_btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius-btn); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; text-decoration: none; transition: all var(--dn-transition); cursor: pointer; border: 2px solid transparent; } .dn_btn--primary { background: var(--dn-primary); color: var(--dn-white); } .dn_btn--primary:hover { background: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_btn--secondary { background: transparent; color: var(--dn-primary); border-color: var(--dn-primary); } .dn_btn--secondary:hover { background: var(--dn-primary); color: var(--dn-white); } .dn_btn--accent { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--accent:hover { background: #c73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--large { padding: var(--dn-spacing-lg) var(--dn-spacing-2xl); font-size: clamp(1.125rem, 1.75vw, 1.25rem); } .dn_services { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_services__grid { display: grid; gap: var(--dn-spacing-xl); } .dn_service-card { background: var(--dn-gray-light); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); display: grid; grid-template-columns: auto 1fr auto; gap: var(--dn-spacing-lg); align-items: start; transition: all var(--dn-transition); box-shadow: var(--dn-shadow-sm); } .dn_service-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_service-card__icon { font-size: 2.5rem; line-height: 1; } .dn_service-card__content { flex: 1; } .dn_service-card__name { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_service-card__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_service-card__description { color: var(--dn-gray-dark); line-height: 1.6; margin-bottom: var(--dn-spacing-lg); } .dn_service-card__features { list-style: none; padding: 0; margin: 0 0 var(--dn-spacing-lg) 0; line-height: 1.8; color: var(--dn-dark); } .dn_service-card__stats { text-align: center; padding-left: var(--dn-spacing-lg); border-left: 1px solid var(--dn-gray-medium); } .dn_service-card__roi { font-size: clamp(1.875rem, 2.5vw, 2.25rem); font-weight: 700; color: var(--dn-blue); margin-bottom: var(--dn-spacing-xs); } .dn_service-card__roi-label { font-size: 0.875rem; color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-md); } .dn_service-card__price { font-size: clamp(1rem, 1.25vw, 1.125rem); color: var(--dn-dark); font-weight: 600; } .dn_pricing { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); max-width: 1000px; margin: 0 auto; } .dn_pricing-card { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); text-align: center; position: relative; box-shadow: var(--dn-shadow-md); transition: all var(--dn-transition); border: 2px solid var(--dn-gray-medium); } .dn_pricing-card:hover { transform: translateY(-8px); box-shadow: var(--dn-shadow-xl); } .dn_pricing-card--featured { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-secondary) 100%); color: var(--dn-white); transform: scale(1.05); border: none; } .dn_pricing-card--featured:hover { transform: scale(1.05) translateY(-8px); } .dn_pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--dn-accent); color: var(--dn-white); padding: var(--dn-spacing-xs) var(--dn-spacing-lg); border-radius: 20px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; } .dn_pricing-card__name { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_pricing-card--featured .dn_pricing-card__name { margin-top: var(--dn-spacing-md); } .dn_pricing-card__price { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); color: var(--dn-primary); } .dn_pricing-card--featured .dn_pricing-card__price { color: var(--dn-white); } .dn_pricing-card__period { font-size: 1rem; font-weight: 400; } .dn_pricing-card__description { margin-bottom: var(--dn-spacing-xl); color: var(--dn-gray-dark); } .dn_pricing-card--featured .dn_pricing-card__description { color: var(--dn-white); opacity: 0.95; } .dn_pricing-card__features { list-style: none; padding: 0; margin: 0 0 var(--dn-spacing-xl) 0; text-align: left; line-height: 2; } .dn_pricing-card--featured .dn_pricing-card__features { color: var(--dn-white); } .dn_pricing-card__features a { color: var(--dn-blue); text-decoration: none; } .dn_pricing-card__features a:hover { text-decoration: underline; } .dn_pricing-card--featured .dn_pricing-card__features a { color: var(--dn-white); text-decoration: underline; } .dn_pricing-card__results { padding-top: var(--dn-spacing-lg); border-top: 1px solid var(--dn-gray-medium); font-size: 0.9rem; } .dn_pricing-card--featured .dn_pricing-card__results { border-color: rgba(255, 255, 255, 0.3); } .dn_roi-calculator { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.5s both; } .dn_calculator { background: linear-gradient(135deg, var(--dn-gray-light) 0%, var(--dn-white) 100%); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); box-shadow: var(--dn-shadow-lg); } .dn_calculator__title { font-size: clamp(1.5rem, 2vw, 1.75rem); text-align: center; color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); } .dn_calculator__comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-2xl); } .dn_calculator__side { background: var(--dn-white); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-lg); box-shadow: var(--dn-shadow-md); } .dn_calculator__side--current { border-top: 4px solid var(--dn-accent); } .dn_calculator__side--ai { border-top: 4px solid var(--dn-blue); } .dn_calculator__side-title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); text-align: center; } .dn_calculator__side--current .dn_calculator__side-title { color: var(--dn-accent); } .dn_calculator__side--ai .dn_calculator__side-title { color: var(--dn-blue); } .dn_calculator__metrics { line-height: 1.8; font-size: 0.95rem; } .dn_calculator__metrics hr { margin: var(--dn-spacing-md) 0; border: none; border-top: 1px solid var(--dn-gray-medium); } .dn_calculator__improvement { text-align: center; padding-top: var(--dn-spacing-xl); } .dn_calculator__improvement-title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_calculator__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-spacing-lg); } .dn_calculator__stat { text-align: center; } .dn_calculator__stat-number { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-xs); } .dn_calculator__stat-label { font-size: 0.875rem; color: var(--dn-gray-dark); } .dn_case-studies { background: var(--dn-gray-light); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.6s both; } .dn_case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-spacing-xl); } .dn_case-study { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); border-left: 4px solid var(--dn-blue); transition: all var(--dn-transition); } .dn_case-study:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_case-study__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); font-weight: 700; } .dn_case-study__details { margin-bottom: var(--dn-spacing-lg); padding-bottom: var(--dn-spacing-md); border-bottom: 1px solid var(--dn-gray-medium); } .dn_case-study__details p { margin: var(--dn-spacing-xs) 0; font-size: 0.9rem; color: var(--dn-gray-dark); } .dn_case-study__results-title { font-size: 1.125rem; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); font-weight: 600; } .dn_case-study__results { list-style: none; padding: 0; margin: 0 0 var(--dn-spacing-lg) 0; line-height: 1.8; } .dn_case-study__results li { padding-left: var(--dn-spacing-lg); position: relative; margin-bottom: var(--dn-spacing-xs); } .dn_case-study__results li::before { content: "→"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_case-study__outcome { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); color: var(--dn-white); padding: var(--dn-spacing-md); border-radius: var(--dn-radius-md); text-align: center; } .dn_case-study__outcome p { margin: 0; font-weight: 600; } .dn_faq { background: var(--dn-white); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.7s both; } .dn_faq-list { max-width: 900px; margin: 0 auto; } .dn_faq-item { background: var(--dn-gray-light); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-lg); transition: all var(--dn-transition); } .dn_faq-item:hover { box-shadow: var(--dn-shadow-md); transform: translateY(-2px); } .dn_faq-item__question { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); font-weight: 600; } .dn_faq-item__answer { line-height: 1.7; color: var(--dn-dark); } .dn_final-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-4xl) 0; color: var(--dn-white); animation: dn_fadeInUp 0.8s ease-out 0.8s both; } .dn_final-cta__title { font-size: clamp(1.875rem, 4vw, 3rem); text-align: center; margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_final-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); text-align: center; margin-bottom: var(--dn-spacing-2xl); opacity: 0.95; } .dn_audit-offer { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); max-width: 800px; margin: 0 auto var(--dn-spacing-2xl); text-align: center; } .dn_audit-offer__title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--dn-spacing-md); font-weight: 700; } .dn_audit-offer__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-spacing-xl); opacity: 0.95; } .dn_audit-offer__features { list-style: none; padding: 0; margin: 0 auto var(--dn-spacing-xl); max-width: 600px; text-align: left; line-height: 2; } .dn_audit-offer__features li { padding-left: var(--dn-spacing-lg); position: relative; margin-bottom: var(--dn-spacing-sm); } .dn_audit-offer__features li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; } .dn_audit-offer__note { margin-top: var(--dn-spacing-md); font-size: 0.9rem; opacity: 0.9; } .dn_contact-info { text-align: center; } .dn_contact-info__ready { font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-spacing-sm); } .dn_contact-info__phone { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); color: var(--dn-white); } .dn_contact-info__message { font-size: clamp(1rem, 1.25vw, 1.125rem); opacity: 0.95; max-width: 600px; margin: 0 auto; } @media (max-width: 768px) { .dn_hero__stats { grid-template-columns: repeat(2, 1fr); } .dn_comparison { grid-template-columns: 1fr; } .dn_service-card { grid-template-columns: 1fr; text-align: center; } .dn_service-card__icon { justify-self: center; } .dn_service-card__stats { border-left: none; border-top: 1px solid var(--dn-gray-medium); padding-left: 0; padding-top: var(--dn-spacing-lg); margin-top: var(--dn-spacing-lg); } .dn_pricing-grid { grid-template-columns: 1fr; } .dn_pricing-card--featured { transform: scale(1); } .dn_pricing-card--featured:hover { transform: translateY(-8px); } .dn_calculator__comparison { grid-template-columns: 1fr; } .dn_calculator__stats { grid-template-columns: repeat(2, 1fr); } .dn_case-studies-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .dn_hero__stats { grid-template-columns: 1fr; } .dn_calculator__stats { grid-template-columns: 1fr; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-50: #F9FAFB; --dn-gray-100: #F3F4F6; --dn-gray-200: #E5E7EB; --dn-gray-300: #D1D5DB; --dn-gray-500: #6B7280; --dn-gray-600: #4B5563; --dn-gray-700: #374151; --dn-space-xs: 4px; --dn-space-sm: 8px; --dn-space-md: 16px; --dn-space-lg: 24px; --dn-space-xl: 32px; --dn-space-2xl: 48px; --dn-space-3xl: 64px; --dn-space-4xl: 96px; --dn-radius: 14px; --dn-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --dn-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --dn-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --dn-transition: 300ms ease; } @keyframes dnFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .dn-alert { display: flex; align-items: center; gap: var(--dn-space-lg); background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: var(--dn-radius); padding: var(--dn-space-lg); animation: dnFadeInUp 0.8s ease; flex-wrap: wrap; } .dn-alert__icon { font-size: 2rem; } .dn-alert__content { flex: 1; min-width: 250px; } .dn-alert__title { color: var(--dn-white); font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: var(--dn-space-xs); font-weight: 700; } .dn-alert__description { color: rgba(255,255,255,0.9); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.5; } .dn-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-space-lg); animation: dnFadeInUp 0.8s ease 0.1s both; } .dn-card--interactive { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-space-xl); text-align: center; transition: all var(--dn-transition); box-shadow: var(--dn-shadow-sm); cursor: pointer; } .dn-card--interactive:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn-card__icon { font-size: 2.5rem; margin-bottom: var(--dn-space-md); } .dn-card__title { color: var(--dn-primary); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-space-sm); font-weight: 600; } .dn-card__description { color: var(--dn-gray-600); font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn-practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-space-xl); animation: dnFadeInUp 0.8s ease 0.2s both; } .dn-practice-card { background: var(--dn-white); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); overflow: hidden; transition: all var(--dn-transition); } .dn-practice-card:hover { transform: translateY(-8px); box-shadow: var(--dn-shadow-lg); } .dn-practice-card__header { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); color: var(--dn-white); padding: var(--dn-space-lg); } .dn-practice-card--pi .dn-practice-card__header { background: linear-gradient(135deg, var(--dn-accent), #E74C3C); } .dn-practice-card--family .dn-practice-card__header { background: linear-gradient(135deg, var(--dn-primary), var(--dn-blue)); } .dn-practice-card--criminal .dn-practice-card__header { background: linear-gradient(135deg, var(--dn-dark), var(--dn-primary)); } .dn-practice-card__header h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-space-sm); } .dn-practice-card__header p { font-size: clamp(0.875rem, 1.2vw, 1rem); opacity: 0.95; } .dn-practice-card__body { padding: var(--dn-space-lg); } .dn-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-space-md); margin-bottom: var(--dn-space-lg); text-align: center; } .dn-metric-item { display: flex; flex-direction: column; gap: var(--dn-space-xs); } .dn-metric-item__label { color: var(--dn-gray-600); font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .dn-metric-item__value { color: var(--dn-dark); font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 700; } .dn-metric-item__value--highlight { color: var(--dn-blue); } .dn-practice-card__details { background: var(--dn-gray-50); border-radius: var(--dn-radius); padding: var(--dn-space-md); margin-bottom: var(--dn-space-lg); } .dn-detail-row { display: flex; justify-content: space-between; padding: var(--dn-space-sm) 0; border-bottom: 1px solid var(--dn-gray-200); } .dn-detail-row:last-child { border-bottom: none; } .dn-detail-row__label { color: var(--dn-gray-700); font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn-detail-row__value { color: var(--dn-dark); font-weight: 600; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn-geo-callout { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); border-radius: var(--dn-radius); padding: var(--dn-space-md); margin-bottom: var(--dn-space-lg); } .dn-geo-callout__title { color: var(--dn-primary); font-weight: 700; margin-bottom: var(--dn-space-sm); } .dn-geo-callout__text { color: var(--dn-gray-700); font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.5; } .dn-btn--blue { background: var(--dn-blue); color: var(--dn-white); } .dn-btn--blue:hover { background: var(--dn-secondary); transform: translateY(-2px); } .dn-btn--blue:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn-highlight-blue { color: var(--dn-blue); } .dn-section__cta { text-align: center; margin-top: var(--dn-space-xl); } .dn-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-space-xl); animation: dnFadeInUp 0.8s ease 0.3s both; } .dn-result-card { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-space-xl); text-align: center; box-shadow: var(--dn-shadow-md); transition: all var(--dn-transition); } .dn-result-card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn-result-card__metric { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; color: var(--dn-accent); margin-bottom: var(--dn-space-md); } .dn-result-card__title { color: var(--dn-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-space-md); font-weight: 700; } .dn-result-card__text { color: var(--dn-gray-700); font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6; margin-bottom: var(--dn-space-lg); } .dn-cta__buttons { display: flex; gap: var(--dn-space-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-space-lg); } .dn-btn--large { padding: var(--dn-space-md) var(--dn-space-2xl); font-size: clamp(1rem, 1.5vw, 1.25rem); } .dn-cta__note { color: rgba(255,255,255,0.8); font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn-section--accent { background: linear-gradient(135deg, var(--dn-blue), var(--dn-secondary)); padding: var(--dn-space-2xl) 0; } @media (max-width: 768px) { .dn-practice-grid { grid-template-columns: 1fr; } .dn-results-grid { grid-template-columns: 1fr; } .dn-metrics-row { grid-template-columns: 1fr; gap: var(--dn-space-md); } .dn-cta__buttons { flex-direction: column; align-items: center; } .dn-btn--large { width: 100%; max-width: 300px; } .dn-table { font-size: 0.875rem; } .dn-table th, .dn-table td { padding: var(--dn-space-sm); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-light: #F8F9FA; --dn-gray: #E9ECEF; --dn-gray-dark: #6B7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-radius: 14px; --dn-shadow: 0 4px 6px rgba(0,0,0,0.1); --dn-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --dn-transition: all 0.3s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-3xl) var(--dn-spacing-lg); text-align: center; color: var(--dn-white); } .dn-hero__inner { animation: fadeInUp 0.8s ease; } .dn-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.75rem); opacity: 0.95; margin-bottom: var(--dn-spacing-2xl); } .dn-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-spacing-xl); max-width: 600px; margin: 0 auto; } .dn-stat { background: rgba(255,255,255,0.1); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); backdrop-filter: blur(10px); } .dn-stat__number { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); color: var(--dn-blue); } .dn-stat__label { font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn-alert-section { background: linear-gradient(135deg, var(--dn-blue), var(--dn-secondary)); padding: var(--dn-spacing-xl) 0; } .dn-alert-box { display: flex; align-items: center; gap: var(--dn-spacing-lg); background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); animation: fadeInUp 0.9s ease; } .dn-alert-box__icon { font-size: 2.5rem; flex-shrink: 0; } .dn-alert-box__content { flex: 1; } .dn-alert-box__title { color: var(--dn-white); font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-xs); } .dn-alert-box__text { color: rgba(255,255,255,0.95); font-size: clamp(0.875rem, 1.5vw, 1.125rem); } .dn-section { padding: var(--dn-spacing-3xl) 0; } .dn-section--light { background: var(--dn-gray-light); } .dn-section__heading { text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-2xl); font-weight: 700; animation: fadeInUp 0.8s ease; } .dn-section__subheading { text-align: center; color: var(--dn-gray-dark); font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: var(--dn-spacing-2xl); max-width: 800px; margin-left: auto; margin-right: auto; } .dn-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-lg); animation: fadeInUp 1s ease; } .dn-tool-card { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); text-align: center; transition: var(--dn-transition); box-shadow: var(--dn-shadow); cursor: pointer; } .dn-tool-card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn-tool-card__icon { font-size: 3rem; display: block; margin-bottom: var(--dn-spacing); } .dn-tool-card__title { font-size: 1.125rem; color: var(--dn-primary); font-weight: 600; margin-bottom: var(--dn-spacing-sm); } .dn-tool-card__text { color: var(--dn-gray-dark); font-size: 0.875rem; } .dn-practices { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-spacing-xl); animation: fadeInUp 1.1s ease; } .dn-practice { background: var(--dn-white); border-radius: var(--dn-radius); overflow: hidden; box-shadow: var(--dn-shadow); transition: var(--dn-transition); } .dn-practice:hover { transform: translateY(-8px); box-shadow: var(--dn-shadow-lg); } .dn-practice__header { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); color: var(--dn-white); padding: var(--dn-spacing-lg); } .dn-practice--injury .dn-practice__header { background: linear-gradient(135deg, var(--dn-accent), #E55B68); } .dn-practice--family .dn-practice__header { background: linear-gradient(135deg, var(--dn-primary), var(--dn-blue)); } .dn-practice--criminal .dn-practice__header { background: linear-gradient(135deg, var(--dn-dark), var(--dn-primary)); } .dn-practice__title { font-size: 1.5rem; margin-bottom: var(--dn-spacing-sm); } .dn-practice__tagline { font-size: 0.875rem; opacity: 0.9; } .dn-practice__body { padding: var(--dn-spacing-lg); } .dn-practice__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-spacing); text-align: center; margin-bottom: var(--dn-spacing-lg); } .dn-practice__metric { display: flex; flex-direction: column; } .dn-practice__metric-label { font-size: 0.75rem; color: var(--dn-gray-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--dn-spacing-xs); } .dn-practice__metric-value { font-size: 1.25rem; font-weight: 700; color: var(--dn-dark); } .dn-practice__metric-value--roi { color: var(--dn-blue); } .dn-practice__info { background: var(--dn-gray-light); border-radius: var(--dn-radius); padding: var(--dn-spacing); margin-bottom: var(--dn-spacing-lg); } .dn-practice__info-row { display: flex; justify-content: space-between; padding: var(--dn-spacing-sm) 0; border-bottom: 1px solid var(--dn-gray); font-size: 0.875rem; } .dn-practice__info-row:last-child { border: 0; } .dn-practice__geo { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); border-radius: var(--dn-radius); padding: var(--dn-spacing); margin-bottom: var(--dn-spacing-lg); } .dn-practice__geo-title { font-weight: 700; margin-bottom: var(--dn-spacing-sm); color: var(--dn-primary); } .dn-practice__geo-text { font-size: 0.875rem; line-height: 1.5; } .dn-btn--blue { background: var(--dn-blue); color: var(--dn-white); } .dn-btn--blue:hover { background: var(--dn-secondary); } .dn-comparison-section { background: var(--dn-dark); padding: var(--dn-spacing-3xl) 0; color: var(--dn-white); } .dn-comparison__title { text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--dn-spacing-2xl); color: var(--dn-white); animation: fadeInUp 0.8s ease; } .dn-comparison__table-wrapper { overflow-x: auto; margin-bottom: var(--dn-spacing-xl); } .dn-comparison__table { width: 100%; border-collapse: collapse; background: var(--dn-white); border-radius: var(--dn-radius); overflow: hidden; } .dn-comparison__table thead { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); } .dn-comparison__table th { padding: var(--dn-spacing); color: var(--dn-white); text-align: left; font-weight: 600; } .dn-comparison__table td { padding: var(--dn-spacing); border-bottom: 1px solid var(--dn-gray); color: var(--dn-dark); } .dn-comparison__row--featured { background: #E3F2FD; } .dn-comparison__highlight { color: var(--dn-blue); } .dn-comparison__cta { text-align: center; } .dn-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); animation: fadeInUp 1.2s ease; } .dn-result { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); text-align: center; box-shadow: var(--dn-shadow); transition: var(--dn-transition); } .dn-result:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn-result__number { font-size: 3rem; font-weight: 800; color: var(--dn-accent); margin-bottom: var(--dn-spacing); } .dn-result__title { font-size: 1.5rem; color: var(--dn-dark); margin-bottom: var(--dn-spacing); } .dn-result__description { color: var(--dn-gray-dark); line-height: 1.6; margin-bottom: var(--dn-spacing-lg); } .dn-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-3xl) 0; color: var(--dn-white); } .dn-cta__content { text-align: center; animation: fadeInUp 1.3s ease; } .dn-cta__heading { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--dn-spacing); } .dn-cta__subheading { font-size: clamp(1rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-2xl); opacity: 0.95; } .dn-cta__actions { display: flex; gap: var(--dn-spacing-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-spacing-lg); } .dn-btn--large { padding: var(--dn-spacing) var(--dn-spacing-2xl); font-size: 1.125rem; } .dn-cta__disclaimer { font-size: 0.875rem; opacity: 0.8; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media (max-width: 768px) { .dn-practices, .dn-results { grid-template-columns: 1fr; } .dn-practice__metrics { grid-template-columns: 1fr; } .dn-alert-box { flex-direction: column; text-align: center; } .dn-cta__actions { flex-direction: column; align-items: center; } .dn-btn--large { width: 100%; max-width: 300px; } } :root { --dn-ai-primary: #194A9A; --dn-ai-secondary: #2F62AD; --dn-ai-blue: #348EDF; --dn-ai-accent: #DF4756; --dn-ai-dark: #011F4E; --dn-ai-black: #000000; --dn-ai-white: #FFFFFF; --dn-ai-spacing-xs: 4px; --dn-ai-spacing-sm: 8px; --dn-ai-spacing-md: 16px; --dn-ai-spacing-lg: 24px; --dn-ai-spacing-xl: 32px; --dn-ai-spacing-2xl: 48px; --dn-ai-spacing-3xl: 64px; --dn-ai-spacing-4xl: 96px; --dn-ai-radius: 14px; --dn-ai-radius-sm: 8px; --dn-ai-radius-lg: 20px; --dn-ai-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-ai-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-ai-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-ai-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-ai-font-base: clamp(15px, 1.6vw, 17px); --dn-ai-font-lg: clamp(18px, 2vw, 20px); } @keyframes dn-ai-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .dn_ai-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--dn-ai-black); background: var(--dn-ai-white); overflow-x: hidden; } .dn_ai-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-ai-spacing-lg); } .dn_ai-hero { background: linear-gradient(135deg, var(--dn-ai-dark) 0%, var(--dn-ai-primary) 100%); padding: var(--dn-ai-spacing-4xl) var(--dn-ai-spacing-lg); text-align: center; position: relative; overflow: hidden; animation: dn-ai-fadeInUp 0.6s ease; } .dn_ai-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_ai-hero__title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; color: var(--dn-ai-white); margin-bottom: var(--dn-ai-spacing-lg); line-height: 1.2; position: relative; z-index: 1; } .dn_ai-hero__subtitle { font-size: clamp(18px, 2.5vw, 22px); color: rgba(255, 255, 255, 0.95); margin-bottom: var(--dn-ai-spacing-xl); max-width: 700px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .dn_ai-hero__highlight { background: rgba(52, 142, 223, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(52, 142, 223, 0.3); border-radius: var(--dn-ai-radius); padding: var(--dn-ai-spacing-lg); max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .dn_ai-hero__highlight p { margin: 0; color: var(--dn-ai-white); font-size: var(--dn-ai-font-base); } .dn_ai-content { padding: var(--dn-ai-spacing-3xl) 0; } .dn_ai-intro { padding: var(--dn-ai-spacing-3xl) 0; animation: dn-ai-fadeInUp 0.7s ease 0.1s both; } .dn_ai-intro__text { font-size: var(--dn-ai-font-lg); line-height: 1.7; color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-warning { background: #FFF3CD; border-left: 4px solid #FFC107; padding: var(--dn-ai-spacing-lg); border-radius: var(--dn-ai-radius); margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-warning h3 { color: #856404; margin-top: 0; margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-warning p { color: #856404; margin: 0; } .dn_ai-section { padding: var(--dn-ai-spacing-3xl) 0; animation: dn-ai-fadeInUp 0.8s ease 0.2s both; } .dn_ai-section--alt { background: #F8F9FA; } .dn_ai-section__title { font-size: clamp(28px, 4vw, 36px); color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-lg); padding-bottom: var(--dn-ai-spacing-md); border-bottom: 3px solid var(--dn-ai-blue); } .dn_ai-section__text { font-size: var(--dn-ai-font-base); line-height: 1.7; color: #6B7280; margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-section__subtitle { font-size: clamp(22px, 3vw, 28px); color: var(--dn-ai-dark); margin: var(--dn-ai-spacing-2xl) 0 var(--dn-ai-spacing-lg); } .dn_ai-stats { background: linear-gradient(135deg, var(--dn-ai-blue) 0%, var(--dn-ai-secondary) 100%); color: var(--dn-ai-white); padding: var(--dn-ai-spacing-2xl); border-radius: var(--dn-ai-radius-lg); margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-stats__title { font-size: clamp(20px, 2.5vw, 24px); margin-bottom: var(--dn-ai-spacing-xl); text-align: center; } .dn_ai-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-ai-spacing-xl); } .dn_ai-stat { text-align: center; } .dn_ai-stat__value { font-size: clamp(32px, 4vw, 42px); font-weight: 700; margin-bottom: var(--dn-ai-spacing-sm); } .dn_ai-stat__label { font-size: clamp(14px, 1.5vw, 16px); opacity: 0.95; } .dn_ai-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-ai-spacing-lg); margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-card { background: var(--dn-ai-white); padding: var(--dn-ai-spacing-xl); border-radius: var(--dn-ai-radius); border-left: 4px solid; box-shadow: var(--dn-ai-shadow-sm); transition: var(--dn-ai-transition); } .dn_ai-card:hover { transform: translateY(-4px); box-shadow: var(--dn-ai-shadow-lg); } .dn_ai-card--danger { border-color: var(--dn-ai-accent); } .dn_ai-card--danger h4 { color: var(--dn-ai-accent); } .dn_ai-card--success { border-color: #28A745; } .dn_ai-card--success h4 { color: #28A745; } .dn_ai-card--warning { border-color: #FFC107; } .dn_ai-card--warning h4 { color: #B8860B; } .dn_ai-card h4 { margin-top: 0; margin-bottom: var(--dn-ai-spacing-md); font-size: clamp(18px, 2vw, 20px); } .dn_ai-card p { margin: 0; color: #6B7280; line-height: 1.6; } .dn_ai-challenges { margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-challenge { background: var(--dn-ai-white); border: 1px solid #E5E7EB; border-radius: var(--dn-ai-radius); padding: var(--dn-ai-spacing-xl); margin-bottom: var(--dn-ai-spacing-lg); display: flex; gap: var(--dn-ai-spacing-lg); box-shadow: var(--dn-ai-shadow-sm); transition: var(--dn-ai-transition); } .dn_ai-challenge:hover { box-shadow: var(--dn-ai-shadow-md); } .dn_ai-challenge__number { background: var(--dn-ai-accent); color: var(--dn-ai-white); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .dn_ai-challenge__content { flex: 1; } .dn_ai-challenge__content h3 { color: var(--dn-ai-accent); margin-top: 0; margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-challenge__content p { margin-bottom: var(--dn-ai-spacing-md); line-height: 1.6; } .dn_ai-challenge__solution { background: #F8F9FA; padding: var(--dn-ai-spacing-md); border-radius: var(--dn-ai-radius-sm); margin-top: var(--dn-ai-spacing-md); } .dn_ai-challenge__solution p { margin: 0; } .dn_ai-principles { margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-principle { border-left: 5px solid var(--dn-ai-blue); padding-left: var(--dn-ai-spacing-lg); margin-bottom: var(--dn-ai-spacing-2xl); } .dn_ai-principle h3 { color: var(--dn-ai-primary); margin-bottom: var(--dn-ai-spacing-md); font-size: clamp(20px, 2.5vw, 24px); } .dn_ai-principle__num { color: var(--dn-ai-blue); margin-right: var(--dn-ai-spacing-sm); } .dn_ai-principle h4 { color: var(--dn-ai-dark); margin: var(--dn-ai-spacing-lg) 0 var(--dn-ai-spacing-md); } .dn_ai-principle__strategies { background: #F8F9FA; padding: var(--dn-ai-spacing-lg); border-radius: var(--dn-ai-radius-sm); margin: var(--dn-ai-spacing-md) 0; } .dn_ai-principle__strategies ul { margin: 0; padding-left: var(--dn-ai-spacing-lg); } .dn_ai-principle__strategies li { margin-bottom: var(--dn-ai-spacing-sm); line-height: 1.6; } .dn_ai-principle__example { background: #D4EDDA; border: 1px solid #C3E6CB; padding: var(--dn-ai-spacing-md); border-radius: var(--dn-ai-radius-sm); margin-top: var(--dn-ai-spacing-md); } .dn_ai-principle__example p { margin: 0; } .dn_ai-calculator { background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%); padding: var(--dn-ai-spacing-3xl) 0; animation: dn-ai-fadeInUp 0.8s ease 0.3s both; } .dn_ai-calculator__title { font-size: clamp(24px, 3vw, 30px); color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-md); text-align: center; } .dn_ai-calculator__subtitle { font-size: var(--dn-ai-font-base); color: #6B7280; margin-bottom: var(--dn-ai-spacing-xl); text-align: center; } .dn_ai-calculator__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-ai-spacing-lg); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-calc-card { background: var(--dn-ai-white); padding: var(--dn-ai-spacing-lg); border-radius: var(--dn-ai-radius); text-align: center; border: 2px solid; transition: var(--dn-ai-transition); } .dn_ai-calc-card:hover { transform: translateY(-4px); box-shadow: var(--dn-ai-shadow-md); } .dn_ai-calc-card--danger { border-color: var(--dn-ai-accent); } .dn_ai-calc-card--danger h4 { color: var(--dn-ai-accent); } .dn_ai-calc-card--success { border-color: #28A745; } .dn_ai-calc-card--success h4 { color: #28A745; } .dn_ai-calc-card--primary { border-color: var(--dn-ai-blue); } .dn_ai-calc-card--primary h4 { color: var(--dn-ai-blue); } .dn_ai-calc-card h4 { margin-top: 0; margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-calc-card__value { font-size: clamp(24px, 3vw, 28px); font-weight: 700; margin-bottom: var(--dn-ai-spacing-sm); color: inherit; } .dn_ai-calc-card__label { font-size: clamp(13px, 1.4vw, 15px); color: #6B7280; } .dn_ai-calculator__cta { text-align: center; } .dn_btn { display: inline-block; padding: var(--dn-ai-spacing-md) var(--dn-ai-spacing-xl); border-radius: 14px; font-weight: 600; text-decoration: none; transition: var(--dn-ai-transition); font-size: var(--dn-ai-font-base); border: 2px solid transparent; cursor: pointer; } .dn_btn--primary { background: var(--dn-ai-blue); color: var(--dn-ai-white); } .dn_btn--primary:hover { background: var(--dn-ai-secondary); transform: translateY(-2px); box-shadow: var(--dn-ai-shadow-md); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-ai-blue); outline-offset: 2px; } .dn_btn--secondary { background: transparent; color: var(--dn-ai-white); border-color: var(--dn-ai-white); } .dn_btn--secondary:hover { background: var(--dn-ai-white); color: var(--dn-ai-primary); } .dn_btn--accent { background: var(--dn-ai-accent); color: var(--dn-ai-white); } .dn_btn--accent:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-ai-shadow-md); } .dn_btn--large { padding: var(--dn-ai-spacing-lg) var(--dn-ai-spacing-2xl); font-size: clamp(16px, 2vw, 18px); } .dn_ai-framework { background: var(--dn-ai-white); border: 1px solid #E5E7EB; border-radius: var(--dn-ai-radius); padding: var(--dn-ai-spacing-xl); margin: var(--dn-ai-spacing-xl) 0; box-shadow: var(--dn-ai-shadow-sm); } .dn_ai-framework__title { font-size: clamp(20px, 2.5vw, 24px); color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-phase { padding: var(--dn-ai-spacing-lg); margin-bottom: var(--dn-ai-spacing-lg); border-left: 4px solid; border-radius: var(--dn-ai-radius-sm); } .dn_ai-phase--primary { background: #F0F4FF; border-color: var(--dn-ai-blue); } .dn_ai-phase--primary h4 { color: var(--dn-ai-blue); } .dn_ai-phase--success { background: #D4EDDA; border-color: #28A745; } .dn_ai-phase--success h4 { color: #28A745; } .dn_ai-phase--warning { background: #FFF3CD; border-color: #FFC107; } .dn_ai-phase--warning h4 { color: #B8860B; } .dn_ai-phase--danger { background: #F8D7DA; border-color: var(--dn-ai-accent); } .dn_ai-phase--danger h4 { color: var(--dn-ai-accent); } .dn_ai-phase h4 { margin-top: 0; margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-phase p { margin-bottom: var(--dn-ai-spacing-md); line-height: 1.6; } .dn_ai-checklist-box { background: #FFF3CD; border-left: 4px solid #FFC107; padding: var(--dn-ai-spacing-xl); border-radius: var(--dn-ai-radius); margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-checklist-box h3 { color: #856404; margin-top: 0; margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-ai-spacing-lg); } .dn_ai-checklist-column h4 { color: #856404; margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-checklist-column ul { color: #856404; margin: 0; padding-left: var(--dn-ai-spacing-lg); } .dn_ai-checklist-column li { margin-bottom: var(--dn-ai-spacing-sm); } .dn_ai-monitor-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-ai-spacing-lg); margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-tier { padding: var(--dn-ai-spacing-xl); border-radius: var(--dn-ai-radius); transition: var(--dn-ai-transition); } .dn_ai-tier:hover { transform: translateY(-4px); box-shadow: var(--dn-ai-shadow-md); } .dn_ai-tier--critical { background: linear-gradient(135deg, var(--dn-ai-accent) 0%, #C82333 100%); color: var(--dn-ai-white); } .dn_ai-tier--warning { background: linear-gradient(135deg, #FFC107 0%, #E0A800 100%); color: #856404; } .dn_ai-tier--info { background: linear-gradient(135deg, var(--dn-ai-blue) 0%, var(--dn-ai-secondary) 100%); color: var(--dn-ai-white); } .dn_ai-tier h3 { margin-top: 0; margin-bottom: var(--dn-ai-spacing-lg); font-size: clamp(18px, 2vw, 20px); } .dn_ai-tier ul { margin: var(--dn-ai-spacing-md) 0; padding-left: var(--dn-ai-spacing-lg); } .dn_ai-tier li { margin-bottom: var(--dn-ai-spacing-sm); } .dn_ai-tier__action { background: rgba(255, 255, 255, 0.2); padding: var(--dn-ai-spacing-md); border-radius: var(--dn-ai-radius-sm); margin-top: var(--dn-ai-spacing-md); } .dn_ai-dashboard { background: var(--dn-ai-white); border: 1px solid #E5E7EB; border-radius: var(--dn-ai-radius); padding: var(--dn-ai-spacing-xl); margin: var(--dn-ai-spacing-xl) 0; box-shadow: var(--dn-ai-shadow-md); } .dn_ai-dashboard h3 { color: var(--dn-ai-dark); margin-top: 0; margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-ai-spacing-md); } .dn_ai-metric-card { background: #F8F9FA; padding: var(--dn-ai-spacing-md); border-radius: var(--dn-ai-radius-sm); text-align: center; border: 2px solid; transition: var(--dn-ai-transition); } .dn_ai-metric-card:hover { transform: scale(1.05); } .dn_ai-metric-card--success { border-color: #28A745; } .dn_ai-metric-card--primary { border-color: var(--dn-ai-blue); } .dn_ai-metric-card--warning { border-color: #FFC107; } .dn_ai-metric-card__value { font-size: clamp(20px, 2.5vw, 24px); font-weight: 700; margin-bottom: var(--dn-ai-spacing-xs); color: inherit; } .dn_ai-metric-card--success .dn_ai-metric-card__value { color: #28A745; } .dn_ai-metric-card--primary .dn_ai-metric-card__value { color: var(--dn-ai-blue); } .dn_ai-metric-card--warning .dn_ai-metric-card__value { color: #B8860B; } .dn_ai-metric-card__label { font-size: clamp(11px, 1.2vw, 13px); color: #6B7280; } .dn_ai-case { background: var(--dn-ai-white); border-radius: var(--dn-ai-radius); padding: var(--dn-ai-spacing-2xl); box-shadow: var(--dn-ai-shadow-lg); border-top: 4px solid var(--dn-ai-blue); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-case__header { display: flex; align-items: center; gap: var(--dn-ai-spacing-lg); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-case__badge { background: var(--dn-ai-blue); color: var(--dn-ai-white); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; } .dn_ai-case__title { color: var(--dn-ai-dark); font-size: clamp(20px, 2.5vw, 24px); margin: 0; } .dn_ai-case__subtitle { color: #6B7280; margin: 5px 0 0 0; } .dn_ai-case__challenge { background: #FFF3CD; padding: var(--dn-ai-spacing-md); border-radius: var(--dn-ai-radius-sm); margin-bottom: var(--dn-ai-spacing-lg); } .dn_ai-case__challenge p { margin: 0; color: #856404; } .dn_ai-case h4 { color: var(--dn-ai-dark); margin: var(--dn-ai-spacing-lg) 0 var(--dn-ai-spacing-md); } .dn_ai-case__solutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-ai-spacing-lg); margin: var(--dn-ai-spacing-lg) 0; } .dn_ai-case__solutions h5 { color: var(--dn-ai-blue); margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-case__solutions ul { margin: 0; padding-left: var(--dn-ai-spacing-lg); color: #6B7280; } .dn_ai-case__solutions li { margin-bottom: var(--dn-ai-spacing-sm); } .dn_ai-case__results { background: #D4EDDA; border: 1px solid #C3E6CB; padding: var(--dn-ai-spacing-lg); border-radius: var(--dn-ai-radius-sm); margin: var(--dn-ai-spacing-lg) 0; } .dn_ai-case__results h4 { color: #155724; margin-top: 0; } .dn_ai-case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dn-ai-spacing-md); } .dn_ai-case__metric { text-align: center; } .dn_ai-case__metric-value { font-size: clamp(24px, 3vw, 28px); font-weight: 700; color: #155724; } .dn_ai-case__metric-label { font-size: clamp(13px, 1.4vw, 15px); color: #155724; } .dn_ai-testimonial { border-left: 4px solid var(--dn-ai-blue); padding-left: var(--dn-ai-spacing-md); margin: var(--dn-ai-spacing-lg) 0; } .dn_ai-testimonial p { margin: 0; font-style: italic; color: #6B7280; line-height: 1.6; } .dn_ai-testimonial cite { display: block; margin-top: var(--dn-ai-spacing-sm); font-weight: 600; font-style: normal; } .dn_ai-comparison-table { margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-comparison-table h3 { color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-lg); text-align: center; } .dn_table-wrapper { overflow-x: auto; } .dn_ai-table { width: 100%; border-collapse: collapse; background: var(--dn-ai-white); box-shadow: var(--dn-ai-shadow-lg); border-radius: var(--dn-ai-radius); overflow: hidden; } .dn_ai-table thead { background: linear-gradient(135deg, var(--dn-ai-dark) 0%, var(--dn-ai-primary) 100%); } .dn_ai-table th { padding: var(--dn-ai-spacing-lg); text-align: left; color: var(--dn-ai-white); font-weight: 600; } .dn_ai-table tbody tr { border-bottom: 1px solid #E5E7EB; } .dn_ai-table tbody tr:nth-child(even) { background: #F8F9FA; } .dn_ai-table tbody tr:hover { background: #E8F4FD; } .dn_ai-table td { padding: var(--dn-ai-spacing-lg); } .dn_ai-table__danger { color: var(--dn-ai-accent); } .dn_ai-table__success { color: #28A745; } .dn_ai-table__highlight { color: var(--dn-ai-blue); font-weight: 700; } .dn_ai-cta { background: linear-gradient(135deg, var(--dn-ai-dark) 0%, var(--dn-ai-primary) 100%); padding: var(--dn-ai-spacing-4xl) 0; text-align: center; color: var(--dn-ai-white); position: relative; overflow: hidden; animation: dn-ai-fadeInUp 0.8s ease 0.4s both; } .dn_ai-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_ai-cta > * { position: relative; z-index: 1; } .dn_ai-cta__title { font-size: clamp(28px, 4vw, 36px); margin-bottom: var(--dn-ai-spacing-lg); } .dn_ai-cta__subtitle { font-size: clamp(16px, 2vw, 18px); margin-bottom: var(--dn-ai-spacing-xl); opacity: 0.95; max-width: 700px; margin-left: auto; margin-right: auto; } .dn_ai-cta__features { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: var(--dn-ai-spacing-xl); border-radius: var(--dn-ai-radius); margin: var(--dn-ai-spacing-xl) auto; max-width: 800px; } .dn_ai-cta__features h3 { margin-top: 0; margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-cta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-ai-spacing-lg); text-align: left; } .dn_ai-cta__item strong { display: block; margin-bottom: var(--dn-ai-spacing-xs); } .dn_ai-cta__item span { opacity: 0.9; font-size: clamp(14px, 1.5vw, 15px); } .dn_ai-cta__buttons { display: flex; gap: var(--dn-ai-spacing-lg); justify-content: center; flex-wrap: wrap; margin: var(--dn-ai-spacing-xl) 0; } .dn_ai-cta__footer { margin-top: var(--dn-ai-spacing-xl); opacity: 0.9; line-height: 1.6; } .dn_ai-footer { background: #F8F9FA; padding: var(--dn-ai-spacing-3xl) 0 var(--dn-ai-spacing-xl); animation: dn-ai-fadeInUp 0.8s ease 0.5s both; } .dn_ai-footer h3 { color: var(--dn-ai-dark); margin-bottom: var(--dn-ai-spacing-lg); } .dn_ai-footer p { color: #6B7280; line-height: 1.7; margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-ai-spacing-xl); margin-bottom: var(--dn-ai-spacing-xl); } .dn_ai-footer__grid h4 { color: var(--dn-ai-blue); margin-bottom: var(--dn-ai-spacing-md); } .dn_ai-footer__grid ul { list-style: none; padding: 0; margin: 0; } .dn_ai-footer__grid li { color: #6B7280; margin-bottom: var(--dn-ai-spacing-sm); } .dn_ai-footer__meta { padding-top: var(--dn-ai-spacing-lg); border-top: 1px solid #E5E7EB; color: #6B7280; font-size: clamp(13px, 1.4vw, 15px); } @media (max-width: 768px) { .dn_ai-challenge { flex-direction: column; } .dn_ai-case__header { flex-direction: column; text-align: center; } .dn_ai-cta__buttons { flex-direction: column; align-items: center; } .dn_btn { width: 100%; max-width: 300px; } .dn_ai-table { font-size: 14px; } .dn_ai-table th, .dn_ai-table td { padding: var(--dn-ai-spacing-md); } .dn_ai-monitor-tiers, .dn_ai-cards, .dn_ai-case__solutions, .dn_ai-checklist-grid, .dn_ai-calc-card, .dn_ai-stats__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .dn_ai-hero { padding: var(--dn-ai-spacing-2xl) var(--dn-ai-spacing-md); } .dn_ai-section { padding: var(--dn-ai-spacing-2xl) 0; } .dn_ai-container { padding: 0 var(--dn-ai-spacing-md); } .dn_ai-metrics-grid { grid-template-columns: repeat(2, 1fr); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-50: #f8f9fa; --dn-gray-100: #f3f4f6; --dn-gray-200: #e5e7eb; --dn-gray-300: #d1d5db; --dn-gray-400: #9ca3af; --dn-gray-500: #6b7280; --dn-gray-600: #4b5563; --dn-gray-700: #374151; --dn-gray-800: #1f2937; --dn-space-xs: 4px; --dn-space-sm: 8px; --dn-space-md: 16px; --dn-space-lg: 24px; --dn-space-xl: 32px; --dn-space-2xl: 48px; --dn-space-3xl: 64px; --dn-space-4xl: 96px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --dn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --dn-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --dn-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); --dn-transition: 300ms ease; --dn-transition-fast: 150ms ease; } * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @keyframes dn_ai-fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_ai-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } .dn_ai-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-space-3xl), 8vw, var(--dn-space-4xl)) var(--dn-space-lg); position: relative; overflow: hidden; animation: dn_ai-fadeIn 0.8s ease; } .dn_ai-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_ai-hero__container { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .dn_ai-hero__badge { display: inline-block; font-size: clamp(0.75rem, 1vw, 0.875rem); text-transform: uppercase; letter-spacing: 2px; color: var(--dn-blue); margin-bottom: var(--dn-space-lg); font-weight: 600; } .dn_ai-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-space-lg); line-height: 1.2; } .dn_ai-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-gray-200); margin-bottom: var(--dn-space-xl); line-height: 1.4; } .dn_ai-hero__highlight { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius); padding: var(--dn-space-lg); max-width: 800px; margin: 0 auto; } .dn_ai-hero__highlight p { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-white); margin: 0; } .dn_ai-alert { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); padding: var(--dn-space-2xl) var(--dn-space-lg); animation: dn_ai-fadeIn 1s ease; } .dn_ai-alert__container { max-width: 1200px; margin: 0 auto; text-align: center; } .dn_ai-alert__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dn-white); margin-bottom: var(--dn-space-md); } .dn_ai-alert__text { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-white); margin-bottom: var(--dn-space-lg); line-height: 1.5; } .dn_ai-btn { display: inline-block; padding: var(--dn-space-md) var(--dn-space-xl); border-radius: var(--dn-radius); text-decoration: none; font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); transition: all var(--dn-transition); cursor: pointer; border: none; } .dn_ai-btn--primary { background: var(--dn-blue); color: var(--dn-white); } .dn_ai-btn--primary:hover, .dn_ai-btn--primary:focus { background: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_ai-btn--white { background: var(--dn-white); color: var(--dn-primary); } .dn_ai-btn--white:hover, .dn_ai-btn--white:focus { background: var(--dn-gray-50); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_ai-btn--secondary { background: var(--dn-secondary); color: var(--dn-white); padding: var(--dn-space-sm) var(--dn-space-lg); } .dn_ai-btn--secondary:hover, .dn_ai-btn--secondary:focus { background: var(--dn-primary); transform: translateY(-2px); } .dn_ai-btn--accent { background: var(--dn-accent); color: var(--dn-white); font-size: clamp(1.125rem, 2vw, 1.5rem); padding: var(--dn-space-lg) var(--dn-space-2xl); } .dn_ai-btn--accent:hover, .dn_ai-btn--accent:focus { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-xl); } .dn_ai-btn:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_ai-content { background: var(--dn-gray-50); padding: var(--dn-space-3xl) 0; } .dn_ai-content__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-space-lg); } .dn_ai-intro { animation: dn_ai-fadeIn 1.2s ease; } .dn_ai-intro p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-gray-700); margin-bottom: var(--dn-space-lg); } .dn_ai-intro a { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-transition); } .dn_ai-intro a:hover { color: var(--dn-primary); text-decoration: underline; } .dn_ai-callout { background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff 100%); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius); padding: var(--dn-space-lg); margin: var(--dn-space-xl) 0; } .dn_ai-callout p { font-size: clamp(0.875rem, 1.25vw, 1rem); line-height: 1.8; color: var(--dn-dark); margin: 0; } .dn_ai-section { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-space-2xl); margin-bottom: var(--dn-space-xl); box-shadow: var(--dn-shadow-sm); animation: dn_ai-fadeIn 1.4s ease; } .dn_ai-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--dn-dark); margin-bottom: var(--dn-space-lg); font-weight: 700; padding-bottom: var(--dn-space-md); border-bottom: 2px solid var(--dn-gray-200); } .dn_ai-section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-primary); margin: var(--dn-space-xl) 0 var(--dn-space-lg); font-weight: 600; } .dn_ai-section p { font-size: clamp(0.875rem, 1.25vw, 1rem); line-height: 1.8; color: var(--dn-gray-700); margin-bottom: var(--dn-space-lg); } .dn_ai-section a { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-transition); } .dn_ai-section a:hover { color: var(--dn-primary); text-decoration: underline; } .dn_ai-quote { background: var(--dn-gray-50); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius); padding: var(--dn-space-lg); margin: var(--dn-space-xl) 0; font-style: italic; } .dn_ai-quote--danger { background: #fff5f5; border-color: var(--dn-accent); } .dn_ai-quote p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: var(--dn-gray-700); margin: 0; } .dn_ai-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-space-lg); margin: var(--dn-space-xl) 0; } .dn_ai-comparison__card { padding: var(--dn-space-lg); border-radius: var(--dn-radius); border: 2px solid var(--dn-gray-200); } .dn_ai-comparison__card--negative { background: #fff5f5; border-color: var(--dn-accent); } .dn_ai-comparison__card--positive { background: #f0f9ff; border-color: var(--dn-blue); } .dn_ai-comparison__card h4 { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-space-md); color: var(--dn-dark); } .dn_ai-comparison__card ul { list-style: none; padding: 0; } .dn_ai-comparison__card li { padding: var(--dn-space-sm) 0; line-height: 1.6; color: var(--dn-gray-700); } .dn_ai-platforms { background: var(--dn-white); border: 2px solid var(--dn-gray-200); border-radius: var(--dn-radius); padding: var(--dn-space-xl); margin: var(--dn-space-xl) 0; } .dn_ai-platforms__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-dark); margin-bottom: var(--dn-space-lg); font-weight: 600; } .dn_ai-platforms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-space-lg); } .dn_ai-platform { text-align: center; padding: var(--dn-space-lg); background: var(--dn-gray-50); border-radius: var(--dn-radius); transition: transform var(--dn-transition); } .dn_ai-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-md); } .dn_ai-platform__icon { font-size: 2rem; margin-bottom: var(--dn-space-sm); display: block; } .dn_ai-platform__name { font-weight: 600; display: block; color: var(--dn-dark); margin-bottom: var(--dn-space-xs); } .dn_ai-platform__metric { color: var(--dn-blue); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_ai-conversations { background: var(--dn-gray-50); border-radius: var(--dn-radius); padding: var(--dn-space-xl); margin: var(--dn-space-xl) 0; } .dn_ai-conversations h4 { color: var(--dn-dark); margin-bottom: var(--dn-space-lg); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_ai-conversations ul { list-style: none; padding: 0; line-height: 2; font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_ai-conversations__note { margin-top: var(--dn-space-lg); padding-top: var(--dn-space-lg); border-top: 1px solid var(--dn-gray-300); font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-600); } .dn_ai-table { width: 100%; border-collapse: collapse; background: var(--dn-white); border-radius: var(--dn-radius); overflow: hidden; box-shadow: var(--dn-shadow-sm); margin: var(--dn-space-xl) 0; } .dn_ai-table thead { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); } .dn_ai-table th { padding: var(--dn-space-md); text-align: left; color: var(--dn-white); font-weight: 600; font-size: clamp(0.875rem, 1vw, 1rem); } .dn_ai-table tbody tr { border-bottom: 1px solid var(--dn-gray-200); } .dn_ai-table tbody tr:nth-child(even) { background: var(--dn-gray-50); } .dn_ai-table tbody tr:hover { background: #e8f4fd; } .dn_ai-table td { padding: var(--dn-space-md); font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-700); } .dn_ai-table__highlight { background: #d4edda !important; } .dn_ai-table__highlight td { font-weight: 600; } .dn_ai-table__subtitle { display: block; font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--dn-gray-600); font-weight: 400; } .dn_ai-table__success { color: #28a745; font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; } .dn_ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-space-lg); margin: var(--dn-space-xl) 0; } .dn_ai-stats__card { background: var(--dn-white); border: 2px solid var(--dn-gray-200); border-radius: var(--dn-radius); padding: var(--dn-space-lg); transition: transform var(--dn-transition); } .dn_ai-stats__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-md); } .dn_ai-stats__card h4 { color: var(--dn-blue); margin-bottom: var(--dn-space-md); font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-stats__card ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-700); } .dn_ai-framework { background: linear-gradient(135deg, #e3f2fd 0%, var(--dn-gray-50) 100%); border-radius: var(--dn-radius); padding: var(--dn-space-2xl); margin: var(--dn-space-xl) 0; text-align: center; } .dn_ai-framework h4 { color: var(--dn-dark); margin-bottom: var(--dn-space-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .dn_ai-framework__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-lg); margin-bottom: var(--dn-space-xl); } .dn_ai-framework__phase { background: var(--dn-white); padding: var(--dn-space-lg); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); transition: transform var(--dn-transition); } .dn_ai-framework__phase:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-md); } .dn_ai-framework__phase h5 { color: var(--dn-blue); margin-bottom: var(--dn-space-md); font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-framework__phase ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-700); text-align: left; } .dn_ai-quickstart { background: var(--dn-white); border: 2px solid var(--dn-blue); border-radius: var(--dn-radius); padding: var(--dn-space-xl); margin: var(--dn-space-xl) 0; } .dn_ai-quickstart h3 { color: var(--dn-dark); margin-bottom: var(--dn-space-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .dn_ai-quickstart__week { background: var(--dn-gray-50); padding: var(--dn-space-lg); border-radius: var(--dn-radius); margin-bottom: var(--dn-space-lg); border-left: 4px solid var(--dn-blue); } .dn_ai-quickstart__week h4 { color: var(--dn-blue); margin-bottom: var(--dn-space-md); font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-quickstart__week ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-700); } .dn_ai-actionplan { background: var(--dn-gray-50); padding: var(--dn-space-xl); border-radius: var(--dn-radius); margin: var(--dn-space-xl) 0; line-height: 2; font-size: clamp(1rem, 1.25vw, 1.125rem); counter-reset: list-counter; padding-left: var(--dn-space-2xl); } .dn_ai-actionplan li { counter-increment: list-counter; position: relative; padding-left: var(--dn-space-xl); margin-bottom: var(--dn-space-md); } .dn_ai-actionplan li::before { content: counter(list-counter); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--dn-blue); color: var(--dn-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; } .dn_ai-author { background: var(--dn-white); padding: var(--dn-space-3xl) var(--dn-space-lg); border-top: 1px solid var(--dn-gray-200); } .dn_ai-author__container { max-width: 900px; margin: 0 auto; } .dn_ai-author__heading { color: var(--dn-dark); margin-bottom: var(--dn-space-lg); font-size: clamp(1.25rem, 2vw, 1.5rem); } .dn_ai-author__content { background: var(--dn-gray-50); padding: var(--dn-space-xl); border-radius: var(--dn-radius); } .dn_ai-author__name { color: var(--dn-blue); margin-bottom: var(--dn-space-xs); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .dn_ai-author__title { color: var(--dn-gray-600); margin-bottom: var(--dn-space-md); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_ai-author__bio { line-height: 1.8; margin-bottom: var(--dn-space-lg); color: var(--dn-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_ai-author__link { color: var(--dn-blue); text-decoration: none; font-weight: 600; transition: color var(--dn-transition); } .dn_ai-author__link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_ai-related { background: var(--dn-gray-50); padding: var(--dn-space-3xl) var(--dn-space-lg); } .dn_ai-related__container { max-width: 1200px; margin: 0 auto; } .dn_ai-related__title { text-align: center; color: var(--dn-dark); margin-bottom: var(--dn-space-2xl); font-size: clamp(1.75rem, 3vw, 2.25rem); } .dn_ai-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-space-xl); } .dn_ai-related__card { background: var(--dn-white); padding: var(--dn-space-xl); border-radius: var(--dn-radius); border-top: 4px solid var(--dn-blue); box-shadow: var(--dn-shadow-sm); transition: transform var(--dn-transition); } .dn_ai-related__card:nth-child(2) { border-top-color: var(--dn-secondary); } .dn_ai-related__card:nth-child(3) { border-top-color: var(--dn-accent); } .dn_ai-related__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_ai-related__card h3 { color: var(--dn-dark); margin-bottom: var(--dn-space-md); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .dn_ai-related__card p { line-height: 1.8; margin-bottom: var(--dn-space-lg); color: var(--dn-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_ai-related__card a { color: var(--dn-blue); text-decoration: none; font-weight: 600; transition: color var(--dn-transition); } .dn_ai-related__card a:hover { color: var(--dn-primary); text-decoration: underline; } .dn_ai-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-space-4xl) var(--dn-space-lg); text-align: center; } .dn_ai-cta__container { max-width: 900px; margin: 0 auto; color: var(--dn-white); } .dn_ai-cta__title { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--dn-space-md); font-weight: 700; } .dn_ai-cta__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: #ffd700; margin-bottom: var(--dn-space-sm); font-weight: 600; } .dn_ai-cta__text { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.8; margin-bottom: var(--dn-space-2xl); } .dn_ai-cta__box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius); padding: var(--dn-space-2xl); margin-bottom: var(--dn-space-2xl); } .dn_ai-cta__box h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--dn-space-lg); } .dn_ai-cta__box p { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-space-lg); } .dn_ai-cta__box ul { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto; line-height: 2; font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-cta__note { font-size: clamp(1rem, 1.25vw, 1.125rem); margin-top: var(--dn-space-lg); } .dn_ai-cta__note span { display: block; color: #ffd700; margin-top: var(--dn-space-sm); } .dn_ai-footer { background: var(--dn-dark); padding: var(--dn-space-3xl) var(--dn-space-lg); color: var(--dn-white); } .dn_ai-footer__container { max-width: 1200px; margin: 0 auto; } .dn_ai-footer__brand { text-align: center; margin-bottom: var(--dn-space-2xl); } .dn_ai-footer__brand h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: var(--dn-space-sm); } .dn_ai-footer__brand p { color: #b8c5d6; font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-2xl); margin-bottom: var(--dn-space-2xl); } .dn_ai-footer__column h4 { color: var(--dn-blue); margin-bottom: var(--dn-space-md); font-size: clamp(1rem, 1.25vw, 1.125rem); } .dn_ai-footer__column p, .dn_ai-footer__column a { color: var(--dn-white); text-decoration: none; line-height: 1.8; font-size: clamp(0.875rem, 1vw, 1rem); display: block; margin-bottom: var(--dn-space-sm); transition: color var(--dn-transition); } .dn_ai-footer__column a:hover { color: var(--dn-blue); } .dn_ai-footer__column span { color: var(--dn-blue); display: block; margin-top: var(--dn-space-sm); } .dn_ai-footer__bottom { text-align: center; padding-top: var(--dn-space-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); } .dn_ai-footer__bottom p { color: #888; font-size: clamp(0.75rem, 1vw, 0.875rem); line-height: 1.8; } .dn_ai-footer__bottom a { color: var(--dn-blue); text-decoration: none; } .dn_ai-footer__bottom a:hover { text-decoration: underline; } @media (max-width: 768px) { .dn_ai-content__container { padding: 0 var(--dn-space-md); } .dn_ai-section { padding: var(--dn-space-lg); } .dn_ai-comparison, .dn_ai-platforms__grid, .dn_ai-stats, .dn_ai-framework__grid, .dn_ai-related__grid { grid-template-columns: 1fr; } .dn_ai-table { font-size: 0.875rem; } .dn_ai-table th, .dn_ai-table td { padding: var(--dn-space-sm); } .dn_ai-actionplan { padding-left: var(--dn-space-lg); } .dn_ai-cta__box ul { padding: 0 var(--dn-space-lg); } } @media (max-width: 480px) { .dn_ai-hero { padding: var(--dn-space-2xl) var(--dn-space-md); } .dn_ai-alert { padding: var(--dn-space-xl) var(--dn-space-md); } .dn_ai-section { margin-bottom: var(--dn-space-lg); padding: var(--dn-space-md); } .dn_ai-footer__grid { grid-template-columns: 1fr; text-align: center; } } :root { --dn_pi-primary: #194A9A; --dn_pi-secondary: #2F62AD; --dn_pi-blue: #348EDF; --dn_pi-accent: #DF4756; --dn_pi-dark: #011F4E; --dn_pi-black: #000000; --dn_pi-white: #FFFFFF; --dn_pi-gray-light: #F8F9FA; --dn_pi-gray: #E5E7EB; --dn_pi-space-xs: 4px; --dn_pi-space-sm: 8px; --dn_pi-space-md: 16px; --dn_pi-space-lg: 24px; --dn_pi-space-xl: 32px; --dn_pi-space-2xl: 48px; --dn_pi-space-3xl: 64px; --dn_pi-space-4xl: 96px; --dn_pi-radius: 14px; --dn_pi-shadow: 0 4px 16px rgba(0,0,0,0.1); --dn_pi-shadow-lg: 0 8px 32px rgba(0,0,0,0.15); --dn_pi-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_pi-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_animate-fade { animation: dn_pi-fadeInUp 0.6s ease-out forwards; } .dn_animate-fade:nth-child(1) { animation-delay: 0.1s; } .dn_animate-fade:nth-child(2) { animation-delay: 0.2s; } .dn_animate-fade:nth-child(3) { animation-delay: 0.3s; } .dn_animate-fade:nth-child(4) { animation-delay: 0.4s; } .dn_pi-hero { background: linear-gradient(135deg, var(--dn_pi-dark) 0%, var(--dn_pi-primary) 100%); padding: var(--dn_pi-space-4xl) var(--dn_pi-space-lg); color: var(--dn_pi-white); text-align: center; position: relative; overflow: hidden; } .dn_pi-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('') no-repeat bottom; background-size: cover; } .dn_container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .dn_pi-hero__badge { display: inline-block; background: linear-gradient(135deg, var(--dn_pi-blue) 0%, var(--dn_pi-secondary) 100%); padding: var(--dn_pi-space-sm) var(--dn_pi-space-lg); border-radius: 30px; font-size: clamp(0.875rem, 1vw, 1rem); font-weight: 600; margin-bottom: var(--dn_pi-space-lg); box-shadow: var(--dn_pi-shadow); } .dn_pi-hero__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; margin-bottom: var(--dn_pi-space-lg); font-weight: 800; } .dn_pi-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn_pi-gray-light); margin-bottom: var(--dn_pi-space-2xl); font-weight: 300; max-width: 800px; margin-left: auto; margin-right: auto; } .dn_pi-stats__grid { display: flex; gap: var(--dn_pi-space-xl); margin-top: var(--dn_pi-space-2xl); flex-wrap: wrap; justify-content: center; } .dn_pi-stats__item { display: flex; flex-direction: column; min-width: 120px; } .dn_pi-stats__value { font-size: clamp(1.875rem, 3vw, 2.25rem); font-weight: 700; color: var(--dn_pi-blue); } .dn_pi-stats__label { font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--dn_pi-gray-light); text-transform: uppercase; letter-spacing: 1px; } .dn_pi-section { padding: var(--dn_pi-space-3xl) 0; background: var(--dn_pi-white); } .dn_pi-section--gray { background: var(--dn_pi-gray-light); } .dn_section__title { font-size: clamp(1.875rem, 3vw, 2.25rem); margin-bottom: var(--dn_pi-space-lg); color: var(--dn_pi-dark); text-align: center; font-weight: 700; } .dn_section__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: #6B7280; margin-bottom: var(--dn_pi-space-2xl); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; } .dn_pi-alert { background: linear-gradient(135deg, rgba(223,71,86,0.1) 0%, rgba(255,217,61,0.1) 100%); border-left: 4px solid var(--dn_pi-accent); padding: var(--dn_pi-space-lg); margin: var(--dn_pi-space-xl) 0; border-radius: var(--dn_pi-radius); } .dn_pi-alert__title { font-weight: 600; margin-bottom: var(--dn_pi-space-sm); color: var(--dn_pi-accent); } .dn_pi-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn_pi-space-xl); margin-top: var(--dn_pi-space-2xl); } .dn_pi-feature { background: var(--dn_pi-white); padding: var(--dn_pi-space-xl); border-radius: var(--dn_pi-radius); box-shadow: var(--dn_pi-shadow); transition: var(--dn_pi-transition); } .dn_pi-section--gray .dn_pi-feature { background: var(--dn_pi-white); } .dn_pi-feature:hover { transform: translateY(-5px); box-shadow: var(--dn_pi-shadow-lg); } .dn_pi-feature__icon { font-size: 3rem; margin-bottom: var(--dn_pi-space-md); display: block; } .dn_pi-feature__title { font-size: clamp(1.125rem, 1.5vw, 1.375rem); margin-bottom: var(--dn_pi-space-md); color: var(--dn_pi-primary); font-weight: 600; } .dn_pi-feature__text { color: #4B5563; line-height: 1.8; } .dn_table-wrapper { overflow-x: auto; margin: var(--dn_pi-space-xl) 0; } .dn_table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--dn_pi-white); box-shadow: var(--dn_pi-shadow-lg); border-radius: var(--dn_pi-radius); overflow: hidden; } .dn_table thead { background: linear-gradient(135deg, var(--dn_pi-dark) 0%, var(--dn_pi-primary) 100%); } .dn_table th { padding: var(--dn_pi-space-lg); text-align: left; color: var(--dn_pi-white); font-weight: 600; } .dn_table tbody tr { border-bottom: 1px solid var(--dn_pi-gray); } .dn_table tbody tr:hover { background: var(--dn_pi-gray-light); } .dn_table td { padding: var(--dn_pi-space-lg); } .dn_pi-highlight { background: linear-gradient(135deg, rgba(52,142,223,0.1) 0%, rgba(52,142,223,0.05) 100%); font-weight: 600; color: var(--dn_pi-primary); } .dn_pi-timeline { position: relative; padding: var(--dn_pi-space-2xl) 0; } .dn_pi-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--dn_pi-blue) 0%, var(--dn_pi-primary) 100%); } .dn_pi-timeline__item { position: relative; padding: var(--dn_pi-space-lg) var(--dn_pi-space-2xl); width: 50%; margin-bottom: var(--dn_pi-space-xl); } .dn_pi-timeline__item:nth-child(odd) { left: 0; text-align: right; } .dn_pi-timeline__item:nth-child(even) { left: 50%; } .dn_pi-timeline__dot { position: absolute; width: 20px; height: 20px; background: var(--dn_pi-blue); border: 3px solid var(--dn_pi-white); border-radius: 50%; top: 30px; box-shadow: var(--dn_pi-shadow); } .dn_pi-timeline__item:nth-child(odd) .dn_pi-timeline__dot { right: -10px; } .dn_pi-timeline__item:nth-child(even) .dn_pi-timeline__dot { left: -10px; } .dn_pi-timeline__content h3 { color: var(--dn_pi-primary); margin-bottom: var(--dn_pi-space-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_pi-timeline__content p { color: #4B5563; line-height: 1.6; } .dn_pi-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn_pi-space-xl); margin-top: var(--dn_pi-space-2xl); } .dn_pi-pricing__card { background: var(--dn_pi-white); border-radius: var(--dn_pi-radius); padding: var(--dn_pi-space-2xl); text-align: center; position: relative; box-shadow: var(--dn_pi-shadow); transition: var(--dn_pi-transition); border: 2px solid var(--dn_pi-gray); } .dn_pi-pricing__card:hover { transform: translateY(-5px); box-shadow: var(--dn_pi-shadow-lg); } .dn_pi-pricing__card--featured { transform: scale(1.05); border-color: var(--dn_pi-blue); box-shadow: 0 15px 40px rgba(52,142,223,0.2); } .dn_pi-pricing__card--featured:hover { transform: scale(1.05) translateY(-5px); } .dn_pi-pricing__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--dn_pi-blue) 0%, var(--dn_pi-secondary) 100%); color: var(--dn_pi-white); padding: var(--dn_pi-space-xs) var(--dn_pi-space-lg); border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .dn_pi-pricing__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn_pi-dark); margin-bottom: var(--dn_pi-space-sm); } .dn_pi-pricing__desc { color: #6B7280; margin-bottom: var(--dn_pi-space-lg); } .dn_pi-pricing__price { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn_pi-primary); margin: var(--dn_pi-space-lg) 0; } .dn_pi-pricing__period { font-size: 1rem; color: #6B7280; } .dn_pi-pricing__features { list-style: none; padding: 0; text-align: left; margin: var(--dn_pi-space-xl) 0; line-height: 2; } .dn_button { display: inline-block; padding: var(--dn_pi-space-md) var(--dn_pi-space-xl); background: var(--dn_pi-primary); color: var(--dn_pi-white); text-decoration: none; border-radius: var(--dn_pi-radius); font-weight: 600; transition: var(--dn_pi-transition); border: none; cursor: pointer; } .dn_button:hover { background: var(--dn_pi-secondary); transform: translateY(-2px); box-shadow: var(--dn_pi-shadow); } .dn_button:focus-visible { outline: 2px solid var(--dn_pi-blue); outline-offset: 2px; } .dn_button--white { background: var(--dn_pi-white); color: var(--dn_pi-primary); } .dn_button--white:hover { background: var(--dn_pi-gray-light); } .dn_button--large { font-size: clamp(1rem, 1.5vw, 1.25rem); padding: var(--dn_pi-space-lg) var(--dn_pi-space-2xl); } .dn_pi-portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn_pi-space-xl); } .dn_pi-portfolio__item { background: var(--dn_pi-white); padding: var(--dn_pi-space-xl); border-radius: var(--dn_pi-radius); box-shadow: var(--dn_pi-shadow); transition: var(--dn_pi-transition); } .dn_pi-portfolio__item:hover { transform: translateY(-5px); box-shadow: var(--dn_pi-shadow-lg); } .dn_pi-portfolio__title { color: var(--dn_pi-primary); margin-bottom: var(--dn_pi-space-md); font-weight: 600; } .dn_pi-portfolio__text { color: #4B5563; line-height: 1.8; } .dn_pi-faqs { max-width: 800px; margin: 0 auto; } .dn_pi-faq { background: var(--dn_pi-white); margin-bottom: var(--dn_pi-space-lg); border-radius: var(--dn_pi-radius); overflow: hidden; box-shadow: var(--dn_pi-shadow); transition: var(--dn_pi-transition); } .dn_pi-faq:hover { box-shadow: var(--dn_pi-shadow-lg); } .dn_pi-faq__question { padding: var(--dn_pi-space-lg); font-weight: 600; color: var(--dn_pi-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background var(--dn_pi-transition); } .dn_pi-faq__answer { padding: 0 var(--dn_pi-space-lg) var(--dn_pi-space-lg); color: #4B5563; line-height: 1.8; } .dn_pi-cta { background: linear-gradient(135deg, var(--dn_pi-dark) 0%, var(--dn_pi-primary) 100%); color: var(--dn_pi-white); padding: var(--dn_pi-space-4xl) var(--dn_pi-space-lg); text-align: center; } .dn_pi-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--dn_pi-space-lg); } .dn_pi-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--dn_pi-space-xl); opacity: 0.9; } .dn_pi-cta__box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn_pi-space-2xl); border-radius: var(--dn_pi-radius); margin: var(--dn_pi-space-2xl) auto; max-width: 600px; } .dn_pi-cta__box h3 { color: var(--dn_pi-blue); margin-bottom: var(--dn_pi-space-md); } .dn_pi-cta__box p { font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: var(--dn_pi-space-xl); } .dn_pi-cta__contact { margin-top: var(--dn_pi-space-xl); opacity: 0.9; line-height: 2; } .dn_pi-cta__contact a { color: var(--dn_pi-white); text-decoration: underline; } .dn_pi-cta__contact a:hover { color: var(--dn_pi-blue); } .dn_pi-footer { background: var(--dn_pi-dark); padding: var(--dn_pi-space-2xl) var(--dn_pi-space-lg); text-align: center; color: #9CA3AF; } .dn_pi-footer__nav { margin-top: var(--dn_pi-space-md); } .dn_pi-footer__nav a { color: var(--dn_pi-blue); text-decoration: none; margin: 0 var(--dn_pi-space-md); transition: color var(--dn_pi-transition); } .dn_pi-footer__nav a:hover { color: var(--dn_pi-white); text-decoration: underline; } @media (max-width: 768px) { .dn_pi-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--dn_pi-space-lg); } .dn_pi-features { grid-template-columns: 1fr; } .dn_pi-timeline::before { left: 20px; } .dn_pi-timeline__item { width: 100%; left: 0 !important; padding-left: 60px; text-align: left !important; } .dn_pi-timeline__dot { left: 10px !important; } .dn_pi-pricing { grid-template-columns: 1fr; } .dn_pi-pricing__card--featured { transform: scale(1); } .dn_pi-portfolio { grid-template-columns: 1fr; } .dn_table { font-size: 0.875rem; } .dn_table th, .dn_table td { padding: var(--dn_pi-space-md); } } @media (max-width: 480px) { .dn_pi-stats__grid { grid-template-columns: 1fr; } .dn_pi-cta__contact { font-size: 0.875rem; } .dn_pi-footer__nav a { display: block; margin: var(--dn_pi-space-sm) 0; } } /* collapsed */ .toc-container.is-collapsed #dn-toc-panel { height: 0!important; overflow: hidden; transition: height .3s ease; } /* expanded */ .toc-container:not(.is-collapsed) #dn-toc-panel { height: auto; /* JS can set scrollHeight for smooth animation */ } :root { --sw-primary: #194A9A; --sw-secondary: #2F62AD; --sw-blue: #348EDF; --sw-accent: #DF4756; --sw-dark: #011F4E; --sw-black: #000000; --sw-white: #FFFFFF; --sw-gray-100: #F8F9FA; --sw-gray-200: #E9ECEF; --sw-gray-300: #DEE2E6; --sw-gray-400: #CED4DA; --sw-gray-500: #ADB5BD; --sw-gray-600: #6C757D; --sw-gray-700: #495057; --sw-gray-800: #343A40; --sw-spacing-xs: 4px; --sw-spacing-sm: 8px; --sw-spacing-md: 16px; --sw-spacing-lg: 24px; --sw-spacing-xl: 32px; --sw-spacing-2xl: 48px; --sw-spacing-3xl: 64px; --sw-spacing-4xl: 96px; --sw-radius: 14px; --sw-radius-sm: 8px; --sw-radius-lg: 20px; --sw-shadow-sm: 0 2px 4px rgba(0,0,0,0.06); --sw-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --sw-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --sw-shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --sw-transition: 300ms ease; --sw-transition-fast: 150ms ease; } @keyframes sw-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .sw_section { animation: sw-fadeInUp 0.6s ease-out; } .sw_section:nth-child(2) { animation-delay: 0.1s; } .sw_section:nth-child(3) { animation-delay: 0.2s; } .sw_section:nth-child(4) { animation-delay: 0.3s; } .sw_section:nth-child(5) { animation-delay: 0.4s; } .sw_section:nth-child(6) { animation-delay: 0.5s; } .sw_section:nth-child(7) { animation-delay: 0.6s; } .sw_section:nth-child(8) { animation-delay: 0.7s; } .sw_section:nth-child(9) { animation-delay: 0.8s; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .sw_article { min-height: 100vh; } .sw_hero { padding: var(--sw-spacing-4xl) var(--sw-spacing-lg); text-align: center; position: relative; overflow: hidden; } .sw_hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; animation: rotate 60s linear infinite; pointer-events: none; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .sw_hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .sw_hero__title { color: var(--sw-white); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--sw-spacing-lg); } .sw_hero__subtitle { color: #FFD700; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 500; margin-bottom: var(--sw-spacing-2xl); } .sw_hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sw-spacing-xl); max-width: 600px; margin: 0 auto; } .sw_hero__stat { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--sw-spacing-lg); border-radius: var(--sw-radius); border: 1px solid rgba(255,255,255,0.2); } .sw_hero__stat-value { display: block; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; color: #FFD700; margin-bottom: var(--sw-spacing-sm); } .sw_hero__stat-label { display: block; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--sw-white); opacity: 0.9; } .sw_section { padding: var(--sw-spacing-3xl) 0; background: var(--sw-white); } .sw_section--alt { background: var(--sw-gray-100); } .sw_section--accent { background: linear-gradient(135deg, var(--sw-primary) 0%, var(--sw-secondary) 100%); color: var(--sw-white); } .sw_section--cta { background: linear-gradient(135deg, var(--sw-dark) 0%, var(--sw-primary) 100%); color: var(--sw-white); } .sw_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sw-spacing-lg); } .sw_section__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--sw-dark); margin-bottom: var(--sw-spacing-xl); text-align: center; } .sw_section__title--white { color: var(--sw-white); } .sw_section__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; color: var(--sw-primary); margin-bottom: var(--sw-spacing-lg); } .sw_section__subtitle--white { color: var(--sw-white); } .sw_section__subtitle--accent { color: #FFD700; } .sw_section__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; color: var(--sw-gray-700); margin-bottom: var(--sw-spacing-xl); } .sw_highlight { background: var(--sw-gray-100); border-left: 4px solid var(--sw-blue); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); margin: var(--sw-spacing-xl) 0; } .sw_quote { font-style: italic; margin: 0; } .sw_quote p { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--sw-dark); margin-bottom: var(--sw-spacing-md); } .sw_quote cite { display: block; text-align: right; color: var(--sw-primary); font-weight: 600; font-style: normal; } .sw_quote--featured { background: linear-gradient(135deg, #E3F2FD 0%, #E8F4FD 100%); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); border-left: 5px solid var(--sw-blue); margin: var(--sw-spacing-2xl) 0; text-align: center; } .sw_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sw-spacing-xl); margin: var(--sw-spacing-xl) 0; } .sw_card { background: var(--sw-white); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow-md); transition: transform var(--sw-transition), box-shadow var(--sw-transition); } .sw_card:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow-lg); } .sw_card__title { color: var(--sw-blue); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; margin-bottom: var(--sw-spacing-md); } .sw_card__text { color: var(--sw-gray-700); line-height: 1.6; } .sw_link { color: var(--sw-blue); text-decoration: none; transition: color var(--sw-transition); } .sw_link:hover { color: var(--sw-primary); text-decoration: underline; } .sw_link:focus-visible { outline: 2px solid var(--sw-blue); outline-offset: 2px; border-radius: var(--sw-radius-sm); } .sw_table-wrapper { overflow-x: auto; margin: var(--sw-spacing-xl) 0; } .sw_table { width: 100%; border-collapse: collapse; background: var(--sw-white); border-radius: var(--sw-radius); overflow: hidden; box-shadow: var(--sw-shadow-md); } .sw_table thead { background: linear-gradient(135deg, var(--sw-dark) 0%, var(--sw-primary) 100%); } .sw_table th { padding: var(--sw-spacing-lg); text-align: left; color: var(--sw-white); font-weight: 600; } .sw_table tbody tr { border-bottom: 1px solid var(--sw-gray-200); transition: background var(--sw-transition); } .sw_table tbody tr:nth-child(even) { background: var(--sw-gray-100); } .sw_table tbody tr:hover { background: #E8F4FD; } .sw_table tbody tr:last-child { border-bottom: none; } .sw_table td { padding: var(--sw-spacing-lg); color: var(--sw-gray-700); } .sw_expertise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sw-spacing-xl); margin: var(--sw-spacing-xl) 0; } .sw_expertise-card { background: linear-gradient(135deg, #F0F8FF 0%, #E8F4FD 100%); padding: var(--sw-spacing-lg); border-radius: var(--sw-radius); border: 1px solid var(--sw-blue); } .sw_expertise-card:nth-child(2) { background: linear-gradient(135deg, #FFF4E6 0%, #FFE0B2 100%); border-color: #FF9800; } .sw_expertise-card:nth-child(3) { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); border-color: #9C27B0; } .sw_expertise-card__title { color: var(--sw-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--sw-spacing-md); } .sw_expertise-card__list { list-style: none; padding: 0; margin: 0; } .sw_expertise-card__list li { color: var(--sw-gray-700); line-height: 1.8; padding: var(--sw-spacing-xs) 0; padding-left: var(--sw-spacing-lg); position: relative; } .sw_expertise-card__list li::before { content: '•'; position: absolute; left: 0; color: var(--sw-blue); font-weight: bold; } .sw_geo-box { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); margin-bottom: var(--sw-spacing-xl); } .sw_geo-box__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--sw-white); margin-bottom: var(--sw-spacing-xl); text-align: center; } .sw_platforms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sw-spacing-md); } .sw_platform-card { background: rgba(255,255,255,0.9); color: var(--sw-primary); padding: var(--sw-spacing-md); border-radius: var(--sw-radius-sm); text-align: center; font-weight: 600; transition: transform var(--sw-transition); } .sw_platform-card:hover { transform: scale(1.05); background: var(--sw-white); } .sw_geo-comparison { background: rgba(255,255,255,0.1); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); text-align: center; } .sw_geo-comparison__text { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--sw-white); margin-bottom: var(--sw-spacing-xl); line-height: 1.7; } .sw_btn { display: inline-block; padding: var(--sw-spacing-md) var(--sw-spacing-xl); border-radius: 14px; font-weight: 600; text-decoration: none; transition: all var(--sw-transition); text-align: center; border: 2px solid transparent; cursor: pointer; } .sw_btn--primary { background: var(--sw-blue); color: var(--sw-white); } .sw_btn--primary:hover { background: var(--sw-primary); transform: translateY(-2px); box-shadow: var(--sw-shadow-md); } .sw_btn--primary:active { transform: translateY(0); } .sw_btn--primary:focus-visible { outline: 3px solid var(--sw-blue); outline-offset: 3px; } .sw_btn--secondary { background: var(--sw-secondary); color: var(--sw-white); } .sw_btn--secondary:hover { background: var(--sw-primary); transform: translateY(-2px); box-shadow: var(--sw-shadow-md); } .sw_btn--secondary:focus-visible { outline: 3px solid var(--sw-secondary); outline-offset: 3px; } .sw_btn--accent { background: var(--sw-accent); color: var(--sw-white); } .sw_btn--accent:hover { background: #C73845; transform: translateY(-2px); box-shadow: var(--sw-shadow-lg); } .sw_btn--accent:focus-visible { outline: 3px solid var(--sw-accent); outline-offset: 3px; } .sw_btn--outline { background: transparent; color: var(--sw-blue); border: 2px solid var(--sw-blue); } .sw_btn--outline:hover { background: var(--sw-blue); color: var(--sw-white); transform: translateY(-2px); } .sw_btn--outline:focus-visible { outline: 3px solid var(--sw-blue); outline-offset: 3px; } .sw_btn--large { padding: var(--sw-spacing-lg) var(--sw-spacing-2xl); font-size: clamp(1.125rem, 2vw, 1.25rem); } .sw_client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sw-spacing-lg); margin: var(--sw-spacing-xl) 0; } .sw_client-card { background: var(--sw-white); padding: var(--sw-spacing-lg); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow-sm); border-left: 4px solid var(--sw-blue); transition: all var(--sw-transition); } .sw_client-card:hover { transform: translateX(4px); box-shadow: var(--sw-shadow-md); } .sw_client-card__name { color: var(--sw-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--sw-spacing-sm); } .sw_client-card__text { color: var(--sw-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; } .sw_enterprise { background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); margin: var(--sw-spacing-xl) 0; } .sw_enterprise-list { display: flex; flex-wrap: wrap; gap: var(--sw-spacing-md); margin: var(--sw-spacing-lg) 0; } .sw_enterprise-badge { background: var(--sw-white); padding: var(--sw-spacing-sm) var(--sw-spacing-lg); border-radius: 50px; box-shadow: var(--sw-shadow-sm); font-weight: 600; color: var(--sw-dark); } .sw_cta-wrapper { text-align: center; margin-top: var(--sw-spacing-xl); } .sw_methodology-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sw-spacing-lg); margin: var(--sw-spacing-xl) 0; } .sw_method-card { background: var(--sw-white); padding: var(--sw-spacing-lg); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow-sm); transition: all var(--sw-transition); } .sw_method-card:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow-lg); } .sw_method-card__title { color: var(--sw-blue); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--sw-spacing-sm); } .sw_method-card__text { color: var(--sw-gray-700); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; } .sw_presence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sw-spacing-xl); margin: var(--sw-spacing-xl) 0; } .sw_presence-card { background: var(--sw-white); border: 1px solid var(--sw-gray-200); border-radius: var(--sw-radius); padding: var(--sw-spacing-xl); } .sw_presence-card__title { color: var(--sw-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--sw-spacing-lg); } .sw_presence-card__list { list-style: none; padding: 0; margin: 0; } .sw_presence-card__list li { padding: var(--sw-spacing-sm) 0; color: var(--sw-gray-700); line-height: 1.6; } .sw_career { background: linear-gradient(135deg, #E3F2FD 0%, #E8F4FD 100%); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); margin-top: var(--sw-spacing-xl); } .sw_timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sw-spacing-lg); } .sw_timeline__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sw-spacing-md); } .sw_timeline__date { color: var(--sw-blue); font-weight: 600; display: block; margin-bottom: var(--sw-spacing-xs); } .sw_timeline__role { color: var(--sw-gray-700); display: block; } .sw_services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sw-spacing-xl); margin: var(--sw-spacing-xl) 0; } .sw_service-card { background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); transition: all var(--sw-transition); } .sw_service-card:nth-child(2) { background: linear-gradient(135deg, #FFF4E6 0%, #FFE0B2 100%); } .sw_service-card:nth-child(3) { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); } .sw_service-card:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow-lg); } .sw_service-card__title { color: var(--sw-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--sw-spacing-md); } .sw_service-card__text { color: var(--sw-gray-700); margin-bottom: var(--sw-spacing-lg); line-height: 1.6; } .sw_service-card__link { color: var(--sw-blue); font-weight: 600; text-decoration: none; transition: color var(--sw-transition); } .sw_service-card__link:hover { color: var(--sw-primary); text-decoration: underline; } .sw_legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sw-spacing-md); margin: var(--sw-spacing-xl) 0; } .sw_legal-card { background: var(--sw-gray-100); padding: var(--sw-spacing-lg); border-radius: var(--sw-radius-sm); text-decoration: none; color: var(--sw-dark); transition: all var(--sw-transition); display: block; } .sw_legal-card:hover { background: var(--sw-white); box-shadow: var(--sw-shadow-md); transform: translateY(-2px); } .sw_legal-card strong { display: block; margin-bottom: var(--sw-spacing-xs); color: var(--sw-primary); } .sw_legal-card span { color: var(--sw-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .sw_contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sw-spacing-xl); margin: var(--sw-spacing-xl) 0; } .sw_contact-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); border: 1px solid rgba(255,255,255,0.2); } .sw_contact-card__title { color: #FFD700; font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; margin-bottom: var(--sw-spacing-lg); } .sw_contact-card__address, .sw_contact-card__hours { color: var(--sw-white); line-height: 1.8; font-style: normal; } .sw_contact-card__address a, .sw_contact-card__hours a { color: var(--sw-white); text-decoration: none; } .sw_contact-card__address a:hover, .sw_contact-card__hours a:hover { color: #FFD700; text-decoration: underline; } .sw_contact-card__address strong, .sw_contact-card__hours strong { color: #FFD700; } .sw_final-cta { background: var(--sw-gray-100); padding: var(--sw-spacing-xl); border-radius: var(--sw-radius); text-align: center; margin-top: var(--sw-spacing-xl); } .sw_btn-group { display: flex; gap: var(--sw-spacing-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sw-spacing-lg); } @media (max-width: 768px) { .sw_hero { padding: var(--sw-spacing-2xl) var(--sw-spacing-md); } .sw_section { padding: var(--sw-spacing-2xl) 0; } .sw_container { padding: 0 var(--sw-spacing-md); } .sw_grid, .sw_expertise-grid, .sw_client-grid, .sw_methodology-grid, .sw_presence-grid, .sw_services-grid, .sw_legal-grid, .sw_contact-grid { grid-template-columns: 1fr; } .sw_platforms-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .sw_timeline { grid-template-columns: 1fr; } .sw_table { font-size: 0.875rem; } .sw_table th, .sw_table td { padding: var(--sw-spacing-md); } .sw_btn-group { flex-direction: column; align-items: stretch; } .sw_enterprise-list { flex-direction: column; } } @media (max-width: 480px) { .sw_hero__stats { grid-template-columns: 1fr; } .sw_platforms-grid { grid-template-columns: 1fr; } } .scottmain{ background: linear-gradient(135deg, var(--sw-dark) 0%, var(--sw-primary) 100%); } .scottmain:before{background: radial-gradient(circle at center, rgba(52,142,223,0.1), transparent); } :root { --llm-primary: #194A9A; --llm-secondary: #2F62AD; --llm-blue: #348EDF; --llm-accent: #DF4756; --llm-dark: #011F4E; --llm-black: #000000; --llm-white: #ffffff; --llm-gray-50: #f9fafb; --llm-gray-100: #f3f4f6; --llm-gray-200: #e5e7eb; --llm-gray-300: #d1d5db; --llm-gray-600: #4b5563; --llm-gray-700: #374151; --llm-gray-800: #1f2937; --llm-spacing-xs: 4px; --llm-spacing-sm: 8px; --llm-spacing-md: 16px; --llm-spacing-lg: 24px; --llm-spacing-xl: 32px; --llm-spacing-2xl: 48px; --llm-spacing-3xl: 64px; --llm-spacing-4xl: 96px; --llm-radius: 14px; --llm-radius-sm: 8px; --llm-radius-lg: 20px; --llm-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --llm-shadow-md: 0 4px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --llm-shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --llm-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes llm-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .llm-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--llm-gray-800); } .llm-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--llm-spacing-lg); } .llm-hero { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); padding: var(--llm-spacing-4xl) 0; color: var(--llm-white); text-align: center; position: relative; overflow: hidden; } .llm-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; pointer-events: none; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .llm-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: var(--llm-spacing-lg); line-height: 1.2; animation: llm-fadeInUp 0.8s ease; } .llm-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-2xl); opacity: 0.95; animation: llm-fadeInUp 0.8s ease 0.1s both; } .llm-hero__stats { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius-lg); max-width: 900px; margin: 0 auto; animation: llm-fadeInUp 0.8s ease 0.2s both; } .llm-hero__stats-title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); } .llm-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-lg); } .llm-stat { display: flex; align-items: center; gap: var(--llm-spacing-sm); text-align: left; } .llm-stat__icon { font-size: 1.5rem; } .llm-stat__text { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.4; } .llm-toc-section { background: var(--llm-gray-50); padding: var(--llm-spacing-3xl) 0; } .llm-toc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-2xl); padding: var(--llm-spacing-xl); } .llm-toc__heading { color: var(--llm-blue); font-weight: 600; font-size: 0.875rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--llm-spacing-md); } .llm-content { background: var(--llm-white); padding: var(--llm-spacing-3xl) 0; } .llm-section { margin-bottom: var(--llm-spacing-4xl); animation: llm-fadeInUp 0.8s ease; } .llm-section__title { font-size: clamp(1.875rem, 3vw, 2.5rem); color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-weight: 700; } .llm-section__lead { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); line-height: 1.6; } .llm-section p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; margin-bottom: var(--llm-spacing-lg); color: var(--llm-gray-700); } .llm-card { background: var(--llm-gray-50); border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .llm-card--process { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border: 2px solid #4caf50; } .llm-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); } .llm-link { color: var(--llm-blue); text-decoration: none; font-weight: 600; transition: var(--llm-transition); } .llm-link:hover { color: var(--llm-primary); text-decoration: underline; } .llm-link:focus-visible { outline: 2px solid var(--llm-blue); outline-offset: 2px; border-radius: var(--llm-radius-sm); } .llm-process { display: flex; flex-direction: column; gap: var(--llm-spacing-lg); } .llm-process__step { display: flex; gap: var(--llm-spacing-lg); align-items: flex-start; background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); transition: var(--llm-transition); } .llm-process__step:hover { transform: translateX(4px); box-shadow: var(--llm-shadow-md); } .llm-process__number { font-size: 1.5rem; flex-shrink: 0; } .llm-process__content h4 { color: #4caf50; margin-bottom: var(--llm-spacing-sm); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-process__content p { margin: 0; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--llm-gray-700); } .llm-callout { padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-callout--warning { background: #fff3cd; border-left: 4px solid #ffc107; } .llm-callout--info { background: #e3f2fd; border-left: 4px solid var(--llm-blue); } .llm-callout--danger { background: #ffebee; border-left: 4px solid var(--llm-accent); } .llm-callout__title { color: inherit; margin-bottom: var(--llm-spacing-md); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; } .llm-callout--warning .llm-callout__title { color: #856404; } .llm-callout--info .llm-callout__title { color: #1565c0; } .llm-callout--danger .llm-callout__title { color: var(--llm-accent); } .llm-callout p { margin: 0; line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-callout--warning p { color: #856404; } .llm-callout--info p { color: #1565c0; } .llm-callout--danger p { color: var(--llm-accent); } .llm-table-wrapper { overflow-x: auto; margin: var(--llm-spacing-xl) 0; } .llm-table { width: 100%; border-collapse: collapse; background: var(--llm-white); box-shadow: var(--llm-shadow-md); border-radius: var(--llm-radius); overflow: hidden; } .llm-table thead { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); } .llm-table th { padding: var(--llm-spacing-lg); text-align: left; color: var(--llm-white); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-table tbody tr { border-bottom: 1px solid var(--llm-gray-200); } .llm-table tbody tr:hover { background: var(--llm-gray-50); } .llm-table td { padding: var(--llm-spacing-lg); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-table__success { color: #16a34a; font-weight: 600; } .llm-table__warning { color: #ea580c; font-weight: 600; } .llm-table__danger { color: var(--llm-accent); font-weight: 600; } .llm-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); margin: var(--llm-spacing-xl) 0; } .llm-platform { background: var(--llm-white); border-radius: var(--llm-radius); padding: var(--llm-spacing-xl); box-shadow: var(--llm-shadow-sm); transition: var(--llm-transition); } .llm-platform--chatgpt { border-left: 4px solid #ff5544; } .llm-platform--claude { border-left: 4px solid #9c27b0; } .llm-platform--gemini { border-left: 4px solid #4caf50; } .llm-platform--perplexity { border-left: 4px solid #2196f3; } .llm-platform:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-lg); } .llm-platform__name { color: var(--llm-dark); margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; } .llm-platform__features { list-style: none; padding: 0; line-height: 1.8; color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-highlight { background: linear-gradient(135deg, var(--llm-primary) 0%, var(--llm-blue) 100%); color: var(--llm-white); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-highlight__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-lg); } .llm-highlight__text { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-lg); } .llm-highlight__stats { background: rgba(255,255,255,0.1); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); } .llm-highlight__label { font-weight: 600; margin-bottom: var(--llm-spacing-md); } .llm-highlight__stats ul { list-style: none; padding: 0; line-height: 1.6; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-metrics { background: #fff3cd; padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-metrics__title { color: #856404; margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--llm-spacing-lg); text-align: center; } .llm-metric-card__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: #ffc107; margin-bottom: var(--llm-spacing-sm); } .llm-metric-card__label { color: #856404; font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-journey { background: var(--llm-gray-50); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-journey__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; } .llm-journey__comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--llm-spacing-xl); } .llm-journey__old, .llm-journey__new { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius); } .llm-journey__old h4 { color: var(--llm-blue); margin-bottom: var(--llm-spacing-lg); } .llm-journey__new h4 { color: #51cf66; margin-bottom: var(--llm-spacing-lg); } .llm-journey__flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--llm-spacing-sm); font-size: clamp(0.75rem, 1.5vw, 0.875rem); } .llm-journey__step { background: var(--llm-gray-100); padding: var(--llm-spacing-sm) var(--llm-spacing-md); border-radius: 20px; font-weight: 600; } .llm-journey__new .llm-journey__step { background: #d4edda; } .llm-journey__arrow { color: var(--llm-blue); font-size: 1rem; } .llm-techniques { background: #e8f5e9; padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-techniques__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-technique { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-lg); border-left: 5px solid; transition: var(--llm-transition); } .llm-technique:nth-child(2) { border-color: var(--llm-blue); } .llm-technique:nth-child(3) { border-color: #51cf66; } .llm-technique:nth-child(4) { border-color: #ff9800; } .llm-technique:nth-child(5) { border-color: #9c27b0; } .llm-technique:nth-child(6) { border-color: #f44336; } .llm-technique:hover { transform: translateX(4px); box-shadow: var(--llm-shadow-md); } .llm-technique__title { color: var(--llm-blue); margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-technique__desc { margin-bottom: var(--llm-spacing-lg); line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-technique__example { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-technique__label { font-weight: 600; color: var(--llm-primary); margin-bottom: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-technique__example ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-code { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); font-family: 'Courier New', monospace; font-size: clamp(0.75rem, 1.5vw, 0.875rem); } .llm-technique__platforms { display: flex; flex-wrap: wrap; gap: var(--llm-spacing-md); } .llm-badge { background: #fff3e0; padding: var(--llm-spacing-md); border-radius: var(--llm-radius); text-align: center; flex: 1; min-width: 120px; transition: var(--llm-transition); } .llm-badge:hover { transform: translateY(-2px); box-shadow: var(--llm-shadow-sm); } .llm-badge strong { display: block; color: #ff9800; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-badge small { font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--llm-gray-600); } .llm-strategies { margin: var(--llm-spacing-xl) 0; } .llm-strategies__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-strategy { padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-lg); } .llm-strategy--reddit { background: #fff5f5; border-left: 4px solid var(--llm-accent); } .llm-strategy--quora { background: #e8f5e9; border-left: 4px solid #51cf66; } .llm-strategy__title { margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-strategy--reddit .llm-strategy__title { color: #f44336; } .llm-strategy--quora .llm-strategy__title { color: #51cf66; } .llm-strategy__desc { margin-bottom: var(--llm-spacing-lg); line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-strategy__content { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-strategy__label { font-weight: 600; margin-bottom: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-strategy__content ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-tracking { margin: var(--llm-spacing-xl) 0; } .llm-tracking__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-tracking__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--llm-spacing-lg); } .llm-tracking__method { background: #e3f2fd; padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); transition: var(--llm-transition); } .llm-tracking__method:nth-child(2) { background: #e8f5e9; } .llm-tracking__method:nth-child(3) { background: #fff3e0; } .llm-tracking__method:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-md); } .llm-tracking__method h4 { color: #1976d2; margin-bottom: var(--llm-spacing-lg); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-tracking__method:nth-child(2) h4 { color: #388e3c; } .llm-tracking__method:nth-child(3) h4 { color: #f57c00; } .llm-tracking__method p { margin-bottom: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.8; } .llm-tracking__queries, .llm-tracking__tools, .llm-tracking__indicators { background: var(--llm-white); padding: var(--llm-spacing-md); border-radius: var(--llm-radius-sm); } .llm-tracking__queries strong, .llm-tracking__tools strong, .llm-tracking__indicators strong { font-size: clamp(0.75rem, 1vw, 0.875rem); } .llm-tracking__queries ul, .llm-tracking__tools ul, .llm-tracking__indicators ul { list-style: none; padding: 0; margin-top: var(--llm-spacing-sm); line-height: 1.5; font-size: clamp(0.75rem, 1vw, 0.875rem); } .llm-dashboard { margin: var(--llm-spacing-xl) 0; } .llm-dashboard__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-cases { display: grid; gap: var(--llm-spacing-xl); } .llm-case { border-radius: var(--llm-radius); padding: var(--llm-spacing-2xl); transition: var(--llm-transition); } .llm-case--success { background: #e8f5e9; border-left: 4px solid #51cf66; } .llm-case--info { background: #e3f2fd; border-left: 4px solid var(--llm-blue); } .llm-case--warning { background: #fff3e0; border-left: 4px solid #ff9800; } .llm-case:hover { transform: translateX(4px); box-shadow: var(--llm-shadow-md); } .llm-case__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); margin-bottom: var(--llm-spacing-xl); } .llm-case__challenge, .llm-case__strategy { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-case__challenge h4, .llm-case__strategy h4 { color: #51cf66; margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-case__results { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .llm-case__results h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--llm-spacing-lg); text-align: center; } .llm-result__value { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; color: #51cf66; } .llm-result__label { font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--llm-gray-600); margin-top: var(--llm-spacing-xs); } .llm-case p { margin-bottom: var(--llm-spacing-lg); line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-case ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-case__highlight { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin-top: var(--llm-spacing-lg); } .llm-case__label { font-weight: 600; margin-bottom: var(--llm-spacing-sm); color: #1976d2; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-case__tactics { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin: var(--llm-spacing-lg) 0; } .llm-case__tactics h4 { color: #f57c00; margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-case__impact { background: #e8f5e9; padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin-top: var(--llm-spacing-lg); } .llm-impact__stats { display: flex; justify-content: space-around; text-align: center; margin-top: var(--llm-spacing-md); } .llm-impact__stat { display: flex; flex-direction: column; } .llm-impact__stat strong { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: #388e3c; } .llm-impact__stat small { font-size: clamp(0.625rem, 1vw, 0.75rem); color: var(--llm-gray-600); } .llm-roadmap { display: grid; gap: var(--llm-spacing-xl); } .llm-phase { background: var(--llm-gray-50); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); border-left: 5px solid; transition: var(--llm-transition); } .llm-phase--foundation { border-color: var(--llm-blue); } .llm-phase--seeding { border-color: #51cf66; } .llm-phase--optimization { border-color: #ff9800; } .llm-phase:hover { transform: translateX(4px); box-shadow: var(--llm-shadow-md); } .llm-phase__title { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-phase__weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-lg); } .llm-week { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-week h4 { color: var(--llm-blue); margin-bottom: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-week ul { list-style: none; padding: 0; line-height: 1.6; font-size: clamp(0.75rem, 1vw, 0.875rem); } .llm-phase__strategy { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .llm-phase__strategy h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-distribution { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--llm-spacing-lg); } .llm-distribution__channel { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-distribution__title { font-weight: 600; color: #51cf66; margin-bottom: var(--llm-spacing-md); font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-distribution__channel ul { list-style: none; padding: 0; line-height: 1.6; font-size: clamp(0.75rem, 1vw, 0.875rem); } .llm-quickwins { background: #fff9c4; padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .llm-quickwins h4 { color: #f57c00; margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-quickwins ul { list-style: none; padding: 0; line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-phase__advanced { background: var(--llm-white); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin-bottom: var(--llm-spacing-xl); } .llm-phase__advanced h4 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-optimization { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-lg); } .llm-optimization__area { background: var(--llm-gray-50); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); } .llm-optimization__area h5 { color: #f57c00; margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-optimization__area ul { list-style: none; padding: 0; line-height: 1.6; font-size: clamp(0.875rem, 1.5vw, 1rem); } .llm-expectations { background: #e8f5e9; padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); } .llm-expectations h4 { color: #388e3c; margin-bottom: var(--llm-spacing-lg); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-expectations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--llm-spacing-lg); text-align: center; } .llm-expectation__value { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; color: #388e3c; margin-bottom: var(--llm-spacing-sm); } .llm-expectation__label { font-weight: 600; font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--llm-gray-700); } .llm-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--llm-spacing-xl); margin: var(--llm-spacing-xl) 0; } .llm-tools__category { background: var(--llm-gray-50); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); transition: var(--llm-transition); } .llm-tools__category--free { border-left: 4px solid #51cf66; } .llm-tools__category--premium { border-left: 4px solid var(--llm-blue); } .llm-tools__category--ai { border-left: 4px solid #ff9800; } .llm-tools__category:hover { transform: translateY(-4px); box-shadow: var(--llm-shadow-md); } .llm-tools__category h3 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-tool { background: var(--llm-white); padding: var(--llm-spacing-lg); border-radius: var(--llm-radius-sm); margin-bottom: var(--llm-spacing-lg); } .llm-tool h4 { color: var(--llm-primary); margin-bottom: var(--llm-spacing-sm); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-tool p { margin: 0; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--llm-gray-600); line-height: 1.4; } .llm-resources { background: var(--llm-gray-50); padding: var(--llm-spacing-xl); border-radius: var(--llm-radius); margin: var(--llm-spacing-xl) 0; } .llm-resources h3 { color: var(--llm-dark); margin-bottom: var(--llm-spacing-xl); font-size: clamp(1.25rem, 2vw, 1.5rem); } .llm-resources__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-xl); } .llm-resource h4 { color: var(--llm-blue); margin-bottom: var(--llm-spacing-md); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-resource ul { list-style: none; padding: 0; line-height: 1.8; } .llm-resource li { margin-bottom: var(--llm-spacing-sm); } .llm-cta { background: linear-gradient(135deg, var(--llm-dark) 0%, var(--llm-primary) 100%); padding: var(--llm-spacing-4xl) 0; text-align: center; color: var(--llm-white); position: relative; overflow: hidden; } .llm-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 40s linear infinite; pointer-events: none; } .llm-cta__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--llm-spacing-lg); position: relative; z-index: 1; } .llm-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--llm-spacing-2xl); max-width: 800px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .llm-cta__box { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--llm-spacing-2xl); border-radius: var(--llm-radius); max-width: 800px; margin: 0 auto var(--llm-spacing-2xl); position: relative; z-index: 1; } .llm-cta__box h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--llm-spacing-lg); } .llm-cta__box p { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--llm-spacing-xl); } .llm-cta__actions { display: flex; gap: var(--llm-spacing-lg); justify-content: center; flex-wrap: wrap; } .llm-btn { display: inline-block; padding: var(--llm-spacing-md) var(--llm-spacing-xl); border-radius: var(--llm-radius); font-weight: 600; text-decoration: none; transition: var(--llm-transition); font-size: clamp(1rem, 1.5vw, 1.125rem); } .llm-btn--primary { background: var(--llm-accent); color: var(--llm-white); } .llm-btn--primary:hover { background: #c73846; transform: translateY(-2px); box-shadow: var(--llm-shadow-lg); } .llm-btn--primary:focus-visible { outline: 3px solid var(--llm-white); outline-offset: 3px; } .llm-btn--secondary { background: transparent; color: var(--llm-white); border: 2px solid var(--llm-white); } .llm-btn--secondary:hover { background: var(--llm-white); color: var(--llm-primary); transform: translateY(-2px); } .llm-btn--secondary:focus-visible { outline: 3px solid var(--llm-white); outline-offset: 3px; } .llm-cta__note { font-size: clamp(0.875rem, 1.5vw, 1rem); margin-top: var(--llm-spacing-lg); position: relative; z-index: 1; } .llm-related { background: var(--llm-gray-50); padding: var(--llm-spacing-3xl) 0; } .llm-related__title { text-align: center; color: var(--llm-dark); font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: var(--llm-spacing-2xl); } .llm-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--llm-spacing-xl); } .llm-related__item { text-align: center; padding: var(--llm-spacing-lg); } .llm-related__item h4 { color: var(--llm-blue); margin-bottom: var(--llm-spacing-md); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } .llm-related__item p { color: var(--llm-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.5; margin: 0; } @media (max-width: 768px) { .llm-container { padding: 0 var(--llm-spacing-md); } .llm-table { font-size: 0.875rem; } .llm-table th, .llm-table td { padding: var(--llm-spacing-md); } .llm-stats__grid, .llm-platforms, .llm-metrics__grid, .llm-journey__comparison, .llm-technique__platforms, .llm-tracking__grid, .llm-results__grid, .llm-case__grid, .llm-impact__stats, .llm-phase__weeks, .llm-distribution, .llm-optimization, .llm-expectations__grid, .llm-tools, .llm-resources__grid, .llm-related__grid { grid-template-columns: 1fr; } .llm-journey__flow { flex-direction: column; align-items: center; } .llm-journey__arrow { transform: rotate(90deg); } .llm-cta__actions { flex-direction: column; align-items: center; } .llm-btn { width: 100%; max-width: 300px; } .llm-toc__grid { grid-template-columns: 1fr; gap: var(--llm-spacing-lg); } } @media (max-width: 480px) { .llm-hero { padding: var(--llm-spacing-3xl) 0; } .llm-section { margin-bottom: var(--llm-spacing-3xl); } .llm-card, .llm-callout, .llm-technique, .llm-phase { padding: var(--llm-spacing-lg); } .llm-table { font-size: 0.75rem; } .llm-table th, .llm-table td { padding: var(--llm-spacing-sm); } .llm-badge { min-width: 100px; padding: var(--llm-spacing-sm); } .llm-impact__stats { flex-direction: column; gap: var(--llm-spacing-md); } } :root { --acw-primary: #194A9A; --acw-secondary: #2F62AD; --acw-blue: #348EDF; --acw-accent: #DF4756; --acw-dark: #011F4E; --acw-black: #000000; --acw-white: #FFFFFF; --acw-gray-50: #F9FAFB; --acw-gray-100: #F3F4F6; --acw-gray-200: #E5E7EB; --acw-gray-600: #4B5563; --acw-gray-700: #374151; --acw-spacing-xs: 4px; --acw-spacing-sm: 8px; --acw-spacing-md: 16px; --acw-spacing-lg: 24px; --acw-spacing-xl: 32px; --acw-spacing-2xl: 48px; --acw-spacing-3xl: 64px; --acw-spacing-4xl: 96px; --acw-radius: 14px; --acw-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --acw-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --acw-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --acw-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .acw-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--acw-gray-700); background: var(--acw-white); } .acw-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--acw-spacing-lg); } .acw-hero { background: linear-gradient(135deg, var(--acw-dark) 0%, var(--acw-primary) 100%); padding: var(--acw-spacing-4xl) 0; text-align: center; position: relative; overflow: hidden; } .acw-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: acw-rotate 30s linear infinite; } @keyframes acw-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .acw-hero__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; color: var(--acw-white); margin: 0; position: relative; z-index: 1; animation: acw-fadeInUp 0.8s ease; } .acw-main { background: var(--acw-gray-50); padding: var(--acw-spacing-3xl) 0; } .acw-intro { background: var(--acw-white); border-radius: var(--acw-radius); padding: var(--acw-spacing-2xl); margin-bottom: var(--acw-spacing-xl); box-shadow: var(--acw-shadow-sm); animation: acw-fadeInUp 0.9s ease; } .acw-intro__content { max-width: 900px; margin: 0 auto; } .acw-section__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--acw-dark); margin: 0 0 var(--acw-spacing-lg) 0; padding-bottom: var(--acw-spacing-md); border-bottom: 3px solid var(--acw-blue); display: inline-block; } .acw-intro__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.7; color: var(--acw-gray-700); margin-bottom: var(--acw-spacing-lg); font-weight: 500; } .acw-intro__content p { line-height: 1.8; margin-bottom: var(--acw-spacing-md); color: var(--acw-gray-600); } .acw-intro__content strong { color: var(--acw-primary); font-weight: 600; } .acw-steps { margin-top: var(--acw-spacing-2xl); display: grid; gap: var(--acw-spacing-xl); } .acw-step { background: var(--acw-white); border-radius: var(--acw-radius); overflow: hidden; box-shadow: var(--acw-shadow-md); transition: var(--acw-transition); animation: acw-fadeInUp 1s ease; animation-fill-mode: both; } .acw-step:nth-child(1) { animation-delay: 0.1s; } .acw-step:nth-child(2) { animation-delay: 0.2s; } .acw-step:nth-child(3) { animation-delay: 0.3s; } .acw-step:nth-child(4) { animation-delay: 0.4s; } .acw-step:nth-child(5) { animation-delay: 0.5s; } .acw-step:nth-child(6) { animation-delay: 0.6s; } .acw-step:hover { transform: translateY(-4px); box-shadow: var(--acw-shadow-lg); } .acw-step__header { background: linear-gradient(135deg, var(--acw-primary) 0%, var(--acw-blue) 100%); padding: var(--acw-spacing-xl); display: flex; align-items: center; gap: var(--acw-spacing-lg); } .acw-step__number { width: 60px; height: 60px; background: var(--acw-white); color: var(--acw-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; flex-shrink: 0; } .acw-step__title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; color: var(--acw-white); margin: 0; flex: 1; } .acw-step__content { padding: var(--acw-spacing-xl); } .acw-step__content p { line-height: 1.8; color: var(--acw-gray-600); margin-bottom: var(--acw-spacing-md); } .acw-step__content p:last-child { margin-bottom: 0; } .acw-step__content strong { color: var(--acw-primary); font-weight: 600; } .acw-section { background: var(--acw-white); border-radius: var(--acw-radius); padding: var(--acw-spacing-2xl); margin-top: var(--acw-spacing-2xl); box-shadow: var(--acw-shadow-sm); animation: acw-fadeInUp 1.2s ease; } .acw-section__content { max-width: 900px; margin: 0 auto; } .acw-section__content p { line-height: 1.8; color: var(--acw-gray-600); margin-bottom: var(--acw-spacing-md); } .acw-section__content p:last-child { margin-bottom: 0; } .acw-section__content strong { color: var(--acw-primary); font-weight: 600; } .acw-conclusion { background: linear-gradient(135deg, var(--acw-gray-50) 0%, var(--acw-white) 100%); border: 2px solid var(--acw-primary); border-radius: var(--acw-radius); padding: var(--acw-spacing-2xl); margin-top: var(--acw-spacing-2xl); animation: acw-fadeInUp 1.3s ease; } .acw-conclusion__content { max-width: 900px; margin: 0 auto; } .acw-conclusion__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.7; color: var(--acw-dark); margin-bottom: var(--acw-spacing-lg); font-weight: 500; } .acw-conclusion__content p { line-height: 1.8; color: var(--acw-gray-600); margin-bottom: var(--acw-spacing-md); } .acw-conclusion__content p:last-child { margin-bottom: 0; } .acw-footer { background: linear-gradient(135deg, var(--acw-dark) 0%, var(--acw-secondary) 100%); padding: var(--acw-spacing-3xl) 0; animation: acw-fadeInUp 1.4s ease; } .acw-footer__content { text-align: center; } .acw-footer__text { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--acw-white); margin-bottom: var(--acw-spacing-xl); } .acw-btn { display: inline-block; padding: var(--acw-spacing-md) var(--acw-spacing-xl); border-radius: var(--acw-radius); font-weight: 600; text-decoration: none; transition: var(--acw-transition); font-size: clamp(1rem, 1.5vw, 1.125rem); } .acw-btn--primary { background: var(--acw-accent); color: var(--acw-white); } .acw-btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(223,71,86,0.3); } .acw-btn--primary:focus-visible { outline: 3px solid var(--acw-white); outline-offset: 3px; } @keyframes acw-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .acw-hero::before, .acw-hero__title, .acw-intro, .acw-step, .acw-section, .acw-conclusion, .acw-footer { animation: none; } .acw-step:hover { transform: none; } .acw-btn--primary:hover { transform: none; } } @media (max-width: 768px) { .acw-container { padding: 0 var(--acw-spacing-md); } .acw-hero { padding: var(--acw-spacing-3xl) 0; } .acw-step__header { flex-direction: column; text-align: center; } .acw-step__number { width: 50px; height: 50px; font-size: 1.5rem; } .acw-intro, .acw-step__content, .acw-section, .acw-conclusion { padding: var(--acw-spacing-lg); } .acw-main { padding: var(--acw-spacing-2xl) 0; } } @media (max-width: 480px) { .acw-hero__title { font-size: 1.5rem; } .acw-section__title { font-size: 1.25rem; } .acw-step__title { font-size: 1.125rem; } .acw-btn { width: 100%; text-align: center; } } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-radius-xl: 24px; --dn-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-shadow: 0 4px 16px rgba(0,0,0,0.12); --dn-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-transition: all 0.3s cubic-bezier(0.4,0,0.2,1); --dn-duration: 0.8s; } @keyframes dn-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dn_voice-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } .dn_voice-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_voice-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-spacing-4xl) 0; text-align: center; position: relative; overflow: hidden; } .dn_voice-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; pointer-events: none; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .dn_voice-hero__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); position: relative; z-index: 1; } .dn_voice-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: var(--dn-spacing-lg); line-height: 1.2; animation: dn-fadeInUp var(--dn-duration) ease; } .dn_voice-hero__subtitle { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 400; margin-bottom: var(--dn-spacing-2xl); opacity: 0.95; animation: dn-fadeInUp var(--dn-duration) 0.2s ease both; } .dn_voice-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-lg); margin-top: var(--dn-spacing-2xl); animation: dn-fadeInUp var(--dn-duration) 0.4s ease both; } .dn_voice-hero__stat { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); transition: var(--dn-transition); } .dn_voice-hero__stat:hover { background: rgba(255,255,255,0.15); transform: translateY(-5px); } .dn_voice-hero__stat-value { display: block; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: var(--dn-blue); margin-bottom: var(--dn-spacing-sm); } .dn_voice-hero__stat-label { display: block; font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .dn_voice-definition { padding: var(--dn-spacing-4xl) 0; background: var(--dn-white); } .dn_voice-section__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-2xl); animation: dn-fadeInUp var(--dn-duration) ease; } .dn_voice-section__subtitle { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--dn-primary); margin: var(--dn-spacing-2xl) 0 var(--dn-spacing-lg); animation: dn-fadeInUp var(--dn-duration) 0.2s ease both; } .dn_voice-highlight-box { background: linear-gradient(135deg, var(--dn-primary), var(--dn-secondary)); color: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-lg); animation: dn-fadeInUp var(--dn-duration) 0.3s ease both; } .dn_voice-highlight-box__title { font-size: clamp(1.5rem, 2.5vw, 1.75rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); } .dn_voice-highlight-box__text { font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.8; opacity: 0.95; } .dn_voice-text { font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.8; color: var(--dn-black); margin-bottom: var(--dn-spacing-lg); animation: dn-fadeInUp var(--dn-duration) 0.4s ease both; } .dn_voice-text--center { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: var(--dn-spacing-2xl); } .dn_voice-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); margin: var(--dn-spacing-2xl) 0; } .dn_voice-comparison__card { padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 0.5s ease both; } .dn_voice-comparison__card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-comparison__card--traditional, .dn_voice-comparison__card--negative { background: #FFF5F5; border-left: 4px solid var(--dn-accent); } .dn_voice-comparison__card--voice, .dn_voice-comparison__card--positive { background: #F0F9FF; border-left: 4px solid var(--dn-blue); } .dn_voice-comparison__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-lg); } .dn_voice-comparison__card--traditional .dn_voice-comparison__title, .dn_voice-comparison__card--negative .dn_voice-comparison__title { color: var(--dn-accent); } .dn_voice-comparison__card--voice .dn_voice-comparison__title, .dn_voice-comparison__card--positive .dn_voice-comparison__title { color: var(--dn-primary); } .dn_voice-comparison__list { list-style: none; padding: 0; line-height: 2; } .dn_voice-comparison__list li { padding: var(--dn-spacing-sm) 0; position: relative; padding-left: var(--dn-spacing-lg); } .dn_voice-comparison__list li::before { content: "•"; position: absolute; left: 0; color: var(--dn-dark); font-weight: bold; } .dn_voice-comparison__question { margin-bottom: var(--dn-spacing-md); font-weight: 600; } .dn_voice-comparison__answer { margin-bottom: var(--dn-spacing-md); font-style: italic; } .dn_voice-comparison__result { font-weight: 700; margin-top: var(--dn-spacing-md); } .dn_voice-comparison__card--negative .dn_voice-comparison__result { color: var(--dn-accent); } .dn_voice-comparison__card--positive .dn_voice-comparison__result { color: var(--dn-blue); } .dn_voice-platforms { padding: var(--dn-spacing-4xl) 0; background: #F8F9FA; } .dn_voice-platforms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); margin-top: var(--dn-spacing-2xl); } .dn_voice-platform { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); border-top: 4px solid var(--dn-blue); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 0.6s ease both; } .dn_voice-platform:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-platform__icon { font-size: 3rem; text-align: center; margin-bottom: var(--dn-spacing-md); } .dn_voice-platform__name { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); text-align: center; } .dn_voice-platform__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dn-spacing-md); margin-bottom: var(--dn-spacing-lg); } .dn_voice-platform__stat { text-align: center; } .dn_voice-platform__stat-value { display: block; font-size: clamp(1.5rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-xs); } .dn_voice-platform__stat-label { display: block; font-size: clamp(0.75rem, 1vw, 0.875rem); color: #6C757D; } .dn_voice-platform__usage, .dn_voice-platform__priority { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; margin-bottom: var(--dn-spacing-md); } .dn_voice-statistics { padding: var(--dn-spacing-4xl) 0; background: var(--dn-white); } .dn_voice-metrics { background: var(--dn-primary); color: var(--dn-white); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius-lg); margin-bottom: var(--dn-spacing-2xl); animation: dn-fadeInUp var(--dn-duration) 0.7s ease both; } .dn_voice-metrics__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_voice-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-lg); } .dn_voice-metric { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); transition: var(--dn-transition); } .dn_voice-metric:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); } .dn_voice-metric__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); color: var(--dn-blue); } .dn_voice-metric__text { font-size: clamp(0.875rem, 1.3vw, 1rem); line-height: 1.7; opacity: 0.95; } .dn_voice-behavior__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); margin-top: var(--dn-spacing-2xl); } .dn_voice-behavior { background: #F8F9FA; padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); border-left: 4px solid var(--dn-accent); animation: dn-fadeInUp var(--dn-duration) 0.8s ease both; } .dn_voice-behavior__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_voice-behavior__text { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.7; margin-bottom: var(--dn-spacing-md); color: #495057; } .dn_voice-behavior__list { list-style: none; padding: 0; } .dn_voice-behavior__list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-lg); position: relative; font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; } .dn_voice-behavior__list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: bold; } .dn_voice-optimization { padding: var(--dn-spacing-4xl) 0; background: #F8F9FA; } .dn_voice-keywords__grid, .dn_voice-schema__grid, .dn_voice-technical__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); margin: var(--dn-spacing-xl) 0; } .dn_voice-keyword, .dn_voice-schema, .dn_voice-technical { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 0.9s ease both; } .dn_voice-keyword:hover, .dn_voice-schema:hover, .dn_voice-technical:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-keyword__title, .dn_voice-schema__title, .dn_voice-technical__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); } .dn_voice-keyword__list, .dn_voice-schema__list, .dn_voice-technical__list { list-style: none; padding: 0; line-height: 1.8; } .dn_voice-keyword__list li, .dn_voice-schema__list li, .dn_voice-technical__list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-lg); position: relative; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_voice-keyword__list li::before, .dn_voice-schema__list li::before, .dn_voice-technical__list li::before { content: "•"; position: absolute; left: 0; color: var(--dn-blue); font-weight: bold; } .dn_voice-local { background: var(--dn-blue); color: var(--dn-white); padding: var(--dn-spacing-2xl); border-radius: var(--dn-radius-lg); margin: var(--dn-spacing-2xl) 0; animation: dn-fadeInUp var(--dn-duration) 1s ease both; } .dn_voice-local__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_voice-local__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dn-spacing-lg); } .dn_voice-local__item { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); transition: var(--dn-transition); } .dn_voice-local__item:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); } .dn_voice-local__item-title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); } .dn_voice-local__item-text { font-size: clamp(0.875rem, 1.3vw, 1rem); line-height: 1.6; opacity: 0.95; } .dn_voice-roi { padding: var(--dn-spacing-4xl) 0; background: var(--dn-white); } .dn_voice-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); margin: var(--dn-spacing-2xl) 0; } .dn_voice-result { background: #F8F9FA; padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); border-top: 4px solid var(--dn-primary); animation: dn-fadeInUp var(--dn-duration) 1.1s ease both; } .dn_voice-result__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_voice-result__text { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; margin-bottom: var(--dn-spacing-lg); color: #495057; } .dn_voice-result__list { list-style: none; padding: 0; } .dn_voice-result__list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-lg); position: relative; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_voice-result__list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: bold; } .dn_voice-faq { padding: var(--dn-spacing-4xl) 0; background: #F8F9FA; } .dn_voice-faq__grid { display: grid; gap: var(--dn-spacing-lg); max-width: 900px; margin: 0 auto; } .dn_voice-faq__item { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); border-left: 4px solid var(--dn-blue); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 1.2s ease both; } .dn_voice-faq__item:hover { transform: translateX(5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-faq__question { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_voice-faq__answer { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; color: #495057; } .dn_voice-services { padding: var(--dn-spacing-4xl) 0; background: var(--dn-white); } .dn_voice-services__grid, .dn_voice-integration__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); margin: var(--dn-spacing-2xl) 0; } .dn_voice-service, .dn_voice-integration { background: #F8F9FA; padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 1.3s ease both; } .dn_voice-service:hover, .dn_voice-integration:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-service__title, .dn_voice-integration__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-md); } .dn_voice-service__text, .dn_voice-integration__text { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.7; margin-bottom: var(--dn-spacing-lg); color: #495057; } .dn_voice-service__list { list-style: none; padding: 0; } .dn_voice-service__list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-lg); position: relative; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_voice-service__list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: bold; } .dn_voice-link { color: var(--dn-blue); text-decoration: none; font-weight: 600; transition: var(--dn-transition); } .dn_voice-link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_voice-link:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; border-radius: var(--dn-radius-sm); } .dn_voice-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-spacing-4xl) 0; text-align: center; position: relative; overflow: hidden; } .dn_voice-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(223,71,86,0.1) 0%, transparent 70%); animation: rotate 40s linear infinite; pointer-events: none; } .dn_voice-cta__container { max-width: 900px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); position: relative; z-index: 1; } .dn_voice-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: var(--dn-spacing-lg); animation: dn-fadeInUp var(--dn-duration) ease; } .dn_voice-cta__text { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.7; margin-bottom: var(--dn-spacing-xl); opacity: 0.95; animation: dn-fadeInUp var(--dn-duration) 0.2s ease both; } .dn_voice-cta__button { display: inline-block; background: var(--dn-accent); color: var(--dn-white); padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; text-decoration: none; transition: var(--dn-transition); box-shadow: 0 4px 15px rgba(223,71,86,0.3); animation: dn-fadeInUp var(--dn-duration) 0.4s ease both; } .dn_voice-cta__button:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,71,86,0.4); } .dn_voice-cta__button:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 3px; } .dn_voice-cta__button:active { transform: translateY(0); } .dn_voice-cta__contact { margin-top: var(--dn-spacing-2xl); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; animation: dn-fadeInUp var(--dn-duration) 0.6s ease both; } .dn_voice-cta__phone, .dn_voice-cta__email { color: var(--dn-blue); text-decoration: none; transition: var(--dn-transition); } .dn_voice-cta__phone:hover, .dn_voice-cta__email:hover { color: var(--dn-white); text-decoration: underline; } .dn_voice-resources { padding: var(--dn-spacing-4xl) 0; background: #F8F9FA; } .dn_voice-resources__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); } .dn_voice-resource { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); transition: var(--dn-transition); animation: dn-fadeInUp var(--dn-duration) 1.4s ease both; } .dn_voice-resource:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_voice-resource__title { font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight: 700; margin-bottom: var(--dn-spacing-md); } .dn_voice-resource__text { font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.7; color: #495057; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; animation-delay: 0ms !important; } } @media (max-width: 768px) { .dn_voice-hero__stats, .dn_voice-platforms__grid, .dn_voice-metrics__grid, .dn_voice-behavior__grid, .dn_voice-keywords__grid, .dn_voice-schema__grid, .dn_voice-technical__grid, .dn_voice-local__grid, .dn_voice-results__grid, .dn_voice-services__grid, .dn_voice-integration__grid, .dn_voice-resources__grid, .dn_voice-comparison { grid-template-columns: 1fr; } .dn_voice-platform__stats { grid-template-columns: 1fr; gap: var(--dn-spacing-md); } .dn_voice-cta__button { display: block; width: 100%; max-width: 300px; margin: 0 auto; } } @media (max-width: 480px) { .dn_voice-hero, .dn_voice-definition, .dn_voice-platforms, .dn_voice-statistics, .dn_voice-optimization, .dn_voice-roi, .dn_voice-faq, .dn_voice-services, .dn_voice-resources { padding: var(--dn-spacing-2xl) 0; } .dn_voice-container, .dn_voice-hero__container, .dn_voice-cta__container { padding: 0 var(--dn-spacing-md); } } :root { --abt-primary: #194A9A; --abt-secondary: #2F62AD; --abt-blue: #348EDF; --abt-accent: #DF4756; --abt-dark: #011F4E; --abt-white: #FFFFFF; --abt-gray-50: #F8F9FA; --abt-gray-100: #F3F4F6; --abt-gray-200: #E5E7EB; --abt-gray-600: #6B7280; --abt-gray-700: #374151; --abt-spacing-xs: 4px; --abt-spacing-sm: 8px; --abt-spacing-md: 16px; --abt-spacing-lg: 24px; --abt-spacing-xl: 32px; --abt-spacing-2xl: 48px; --abt-spacing-3xl: 64px; --abt-spacing-4xl: 96px; --abt-radius: 14px; --abt-radius-sm: 8px; --abt-radius-lg: 20px; --abt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --abt-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --abt-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --abt-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes abtFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .abt_wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--abt-gray-700); background: var(--abt-white); } .abt_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--abt-spacing-lg); } .abt_comparison { background: var(--abt-gray-50); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 0.6s ease-out; } .abt_comparison__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abt-spacing-xl); } .abt_comparison__column { background: var(--abt-white); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); box-shadow: var(--abt-shadow-md); transition: transform var(--abt-transition); } .abt_comparison__column:hover { transform: translateY(-4px); box-shadow: var(--abt-shadow-lg); } .abt_comparison__column--negative { border-top: 4px solid var(--abt-accent); } .abt_comparison__column--positive { border-top: 4px solid var(--abt-primary); } .abt_comparison__header { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: var(--abt-spacing-lg); color: var(--abt-dark); } .abt_comparison__item { padding: var(--abt-spacing-sm) 0; border-bottom: 1px solid var(--abt-gray-100); font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--abt-gray-700); } .abt_comparison__item:last-child { border-bottom: none; } .abt_journey { background: var(--abt-white); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 0.7s ease-out; } .abt_section__header { text-align: center; margin-bottom: var(--abt-spacing-3xl); } .abt_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--abt-dark); margin-bottom: var(--abt-spacing-md); } .abt_section__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--abt-gray-600); max-width: 800px; margin: 0 auto; } .abt_timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--abt-spacing-lg); margin-top: var(--abt-spacing-2xl); } .abt_timeline__item { background: var(--abt-gray-50); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); border-left: 4px solid var(--abt-blue); transition: transform var(--abt-transition), box-shadow var(--abt-transition); } .abt_timeline__item:hover { transform: translateX(4px); box-shadow: var(--abt-shadow-md); } .abt_timeline__date { color: var(--abt-primary); font-weight: 700; font-size: clamp(0.875rem, 1vw, 1rem); margin-bottom: var(--abt-spacing-md); } .abt_timeline__title { color: var(--abt-dark); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_timeline__list { list-style: none; padding: 0; } .abt_timeline__list li { position: relative; padding-left: var(--abt-spacing-lg); margin-bottom: var(--abt-spacing-sm); color: var(--abt-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .abt_timeline__list li::before { content: "•"; position: absolute; left: 0; color: var(--abt-blue); font-weight: 700; } .abt_clients { background: var(--abt-gray-50); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 0.8s ease-out; } .abt_clients__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--abt-spacing-lg); } .abt_clients__card { background: var(--abt-white); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); text-align: center; transition: transform var(--abt-transition); box-shadow: var(--abt-shadow-sm); } .abt_clients__card:hover { transform: translateY(-4px); box-shadow: var(--abt-shadow-md); } .abt_clients__icon { font-size: 2.5rem; margin-bottom: var(--abt-spacing-md); } .abt_clients__name { color: var(--abt-dark); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--abt-spacing-sm); } .abt_clients__description { color: var(--abt-gray-600); font-size: clamp(0.75rem, 1vw, 0.875rem); } .abt_advantages { background: var(--abt-white); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 0.9s ease-out; } .abt_advantages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abt-spacing-xl); } .abt_advantages__card { background: var(--abt-gray-50); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); position: relative; transition: transform var(--abt-transition); } .abt_advantages__card:hover { transform: translateY(-4px); box-shadow: var(--abt-shadow-lg); } .abt_advantages__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--abt-primary); color: var(--abt-white); border-radius: 50%; font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_advantages__title { color: var(--abt-dark); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_advantages__description { color: var(--abt-gray-700); line-height: 1.7; font-size: clamp(0.875rem, 1vw, 1rem); } .abt_platforms { background: var(--abt-gray-50); padding: var(--abt-spacing-2xl) 0; animation: abtFadeInUp 1s ease-out; } .abt_platforms__title { text-align: center; color: var(--abt-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: var(--abt-spacing-xl); } .abt_platforms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--abt-spacing-md); max-width: 900px; margin: 0 auto; } .abt_platforms__card { background: var(--abt-white); border-radius: var(--abt-radius-sm); padding: var(--abt-spacing-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--abt-spacing-sm); transition: transform var(--abt-transition); } .abt_platforms__card:hover { transform: translateY(-2px); box-shadow: var(--abt-shadow-md); } .abt_platforms__check { color: var(--abt-blue); font-size: 1.5rem; font-weight: 700; } .abt_platforms__card strong { color: var(--abt-dark); font-size: clamp(0.875rem, 1vw, 1rem); } .abt_platforms__card span { color: var(--abt-gray-600); font-size: clamp(0.75rem, 0.875vw, 0.875rem); } .abt_metrics { background: var(--abt-white); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 1.1s ease-out; } .abt_metrics__title { text-align: center; color: var(--abt-dark); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: var(--abt-spacing-2xl); } .abt_metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--abt-spacing-xl); } .abt_metrics__card { text-align: center; padding: var(--abt-spacing-lg); background: linear-gradient(135deg, var(--abt-primary), var(--abt-secondary)); border-radius: var(--abt-radius); transition: transform var(--abt-transition); } .abt_metrics__card:hover { transform: scale(1.05); box-shadow: var(--abt-shadow-lg); } .abt_metrics__number { display: block; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--abt-white); margin-bottom: var(--abt-spacing-sm); } .abt_metrics__label { color: rgba(255, 255, 255, 0.9); font-size: clamp(0.75rem, 1vw, 0.875rem); text-transform: uppercase; letter-spacing: 0.5px; } .abt_approach { background: var(--abt-gray-50); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 1.2s ease-out; } .abt_approach__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abt-spacing-2xl); } .abt_approach__column { background: var(--abt-white); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); } .abt_approach__heading { color: var(--abt-dark); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_approach__spacing { margin-top: var(--abt-spacing-2xl); } .abt_approach__text { color: var(--abt-gray-700); line-height: 1.7; font-size: clamp(0.875rem, 1vw, 1rem); } .abt_alert { max-width: 1200px; margin: var(--abt-spacing-2xl) auto; padding: var(--abt-spacing-lg); border-radius: var(--abt-radius); font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.7; } .abt_alert--warning { background: linear-gradient(135deg, rgba(223, 71, 86, 0.1), rgba(223, 71, 86, 0.05)); border-left: 4px solid var(--abt-accent); color: var(--abt-gray-700); } .abt_alert--success { background: linear-gradient(135deg, rgba(52, 142, 223, 0.1), rgba(52, 142, 223, 0.05)); border-left: 4px solid var(--abt-blue); color: var(--abt-gray-700); } .abt_future { background: var(--abt-white); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 1.3s ease-out; } .abt_future__section { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abt-spacing-xl); } .abt_future__item { background: var(--abt-gray-50); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); } .abt_future__date { display: inline-block; background: var(--abt-primary); color: var(--abt-white); padding: var(--abt-spacing-sm) var(--abt-spacing-md); border-radius: var(--abt-radius-sm); font-weight: 700; font-size: clamp(0.75rem, 1vw, 0.875rem); margin-bottom: var(--abt-spacing-lg); } .abt_future__title { color: var(--abt-dark); font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_future__list { list-style: none; padding: 0; } .abt_future__list li { position: relative; padding-left: var(--abt-spacing-lg); margin-bottom: var(--abt-spacing-sm); color: var(--abt-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .abt_future__list li::before { content: "•"; position: absolute; left: 0; color: var(--abt-blue); font-weight: 700; } .abt_leadership { background: var(--abt-gray-50); padding: var(--abt-spacing-3xl) 0; animation: abtFadeInUp 1.4s ease-out; } .abt_leadership__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abt-spacing-2xl); } .abt_leadership__column { background: var(--abt-white); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); } .abt_leadership__heading { color: var(--abt-dark); font-size: clamp(1.25rem, 1.75vw, 1.5rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_leadership__description { color: var(--abt-gray-700); margin-bottom: var(--abt-spacing-lg); line-height: 1.7; font-size: clamp(0.875rem, 1vw, 1rem); } .abt_leadership__list, .abt_recognition__list { list-style: none; padding: 0; } .abt_leadership__list li, .abt_recognition__list li { padding: var(--abt-spacing-xs) 0; color: var(--abt-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .abt_cta { background: linear-gradient(135deg, var(--abt-dark) 0%, var(--abt-primary) 100%); color: var(--abt-white); padding: var(--abt-spacing-4xl) 0; text-align: center; animation: abtFadeInUp 1.5s ease-out; } .abt_cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--abt-spacing-md); } .abt_cta__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: var(--abt-spacing-2xl); opacity: 0.95; } .abt_cta__benefits { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--abt-radius); padding: var(--abt-spacing-xl); max-width: 700px; margin: 0 auto var(--abt-spacing-2xl); } .abt_cta__benefits-title { font-size: clamp(1.25rem, 1.75vw, 1.5rem); margin-bottom: var(--abt-spacing-lg); } .abt_cta__benefits-list { list-style: none; padding: 0; text-align: left; } .abt_cta__benefits-list li { padding: var(--abt-spacing-sm) 0; font-size: clamp(0.875rem, 1vw, 1rem); } .abt_cta__button { display: inline-block; background: var(--abt-accent); color: var(--abt-white); padding: var(--abt-spacing-md) var(--abt-spacing-2xl); border-radius: var(--abt-radius); text-decoration: none; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: transform var(--abt-transition), box-shadow var(--abt-transition); margin-bottom: var(--abt-spacing-lg); } .abt_cta__button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(223, 71, 86, 0.3); background: #C73846; } .abt_cta__button:focus-visible { outline: 3px solid var(--abt-blue); outline-offset: 2px; } .abt_cta__phone { font-size: clamp(1rem, 1.25vw, 1.125rem); margin-bottom: var(--abt-spacing-sm); } .abt_cta__offer { font-size: clamp(0.875rem, 1vw, 1rem); opacity: 0.9; } .abt_footer { background: var(--abt-dark); color: var(--abt-white); padding: var(--abt-spacing-3xl) 0 var(--abt-spacing-xl); } .abt_footer__title { text-align: center; font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--abt-spacing-2xl); } .abt_footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--abt-spacing-xl); margin-bottom: var(--abt-spacing-2xl); } .abt_footer__section { text-align: center; } .abt_footer__heading { color: var(--abt-blue); font-size: clamp(1rem, 1.25vw, 1.125rem); margin-bottom: var(--abt-spacing-md); } .abt_footer__text { font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.7; opacity: 0.9; } .abt_footer__bottom { text-align: center; padding-top: var(--abt-spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: clamp(0.75rem, 0.875vw, 0.875rem); opacity: 0.8; } @media (max-width: 768px) { .abt_container { padding: 0 var(--abt-spacing-md); } .abt_comparison, .abt_journey, .abt_clients, .abt_advantages, .abt_metrics, .abt_approach, .abt_future, .abt_leadership, .abt_cta { padding: var(--abt-spacing-2xl) 0; } .abt_timeline, .abt_advantages__grid, .abt_future__section, .abt_leadership__grid, .abt_approach__grid { grid-template-columns: 1fr; } .abt_metrics__grid { grid-template-columns: repeat(2, 1fr); gap: var(--abt-spacing-md); } .abt_platforms__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .abt_metrics__grid, .abt_clients__grid { grid-template-columns: repeat(2, 1fr); } .abt_footer__grid { grid-template-columns: 1fr; text-align: left; } .abt_footer__section { text-align: left; } } :root { --hero-primary: #194A9A; --hero-secondary: #2F62AD; --hero-blue: #348EDF; --hero-accent: #DF4756; --hero-dark: #011F4E; --hero-white: #FFFFFF; --hero-gray-50: #F8F9FA; --hero-gray-100: #F3F4F6; --hero-gray-200: #E5E7EB; --hero-gray-600: #6B7280; --hero-gray-700: #374151; --hero-spacing-xs: 4px; --hero-spacing-sm: 8px; --hero-spacing-md: 16px; --hero-spacing-lg: 24px; --hero-spacing-xl: 32px; --hero-spacing-2xl: 48px; --hero-spacing-3xl: 64px; --hero-spacing-4xl: 96px; --hero-radius: 14px; --hero-radius-sm: 8px; --hero-radius-lg: 20px; --hero-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --hero-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --hero-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --hero-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --hero-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --hero-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes heroFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .hero_wrapper { background: linear-gradient(135deg, var(--hero-dark) 0%, var(--hero-primary) 50%, var(--hero-secondary) 100%); background-size: 200% 200%; animation: heroGradientShift 15s ease infinite; color: var(--hero-white); padding: var(--hero-spacing-4xl) 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero_wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at top right, rgba(52, 142, 223, 0.2) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(223, 71, 86, 0.1) 0%, transparent 50%); pointer-events: none; } .hero_wrapper::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: heroFloat 20s ease-in-out infinite; pointer-events: none; } .hero_container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--hero-spacing-lg); position: relative; z-index: 1; } .hero_content { text-align: center; margin-bottom: var(--hero-spacing-3xl); animation: heroFadeInUp 0.8s ease-out; } .hero_title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; margin-bottom: var(--hero-spacing-xl); background: linear-gradient(135deg, var(--hero-white) 0%, rgba(255, 255, 255, 0.9) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .hero_subtitle { font-size: clamp(1rem, 1.75vw, 1.375rem); line-height: 1.6; max-width: 800px; margin: 0 auto; color: rgba(255, 255, 255, 0.95); font-weight: 400; } .hero_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hero-spacing-lg); animation: heroFadeInUp 1s ease-out 0.2s both; } .hero_stats__card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--hero-radius); padding: var(--hero-spacing-lg) var(--hero-spacing-md); text-align: center; transition: all var(--hero-transition); position: relative; overflow: hidden; } .hero_stats__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%); opacity: 0; transition: opacity var(--hero-transition); } .hero_stats__card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.15); } .hero_stats__card:hover::before { opacity: 1; } .hero_stats__card:focus-visible { outline: 3px solid var(--hero-blue); outline-offset: 2px; } .hero_stats__card--primary { border-color: var(--hero-primary); } .hero_stats__card--primary:hover { border-color: var(--hero-blue); box-shadow: 0 20px 40px rgba(25, 74, 154, 0.3); } .hero_stats__card--secondary { border-color: var(--hero-secondary); } .hero_stats__card--secondary:hover { border-color: var(--hero-blue); box-shadow: 0 20px 40px rgba(47, 98, 173, 0.3); } .hero_stats__card--accent { border-color: var(--hero-accent); } .hero_stats__card--accent:hover { border-color: rgba(223, 71, 86, 0.8); box-shadow: 0 20px 40px rgba(223, 71, 86, 0.3); } .hero_stats__card--blue { border-color: var(--hero-blue); } .hero_stats__card--blue:hover { border-color: rgba(52, 142, 223, 0.8); box-shadow: 0 20px 40px rgba(52, 142, 223, 0.3); } .hero_stats__card--dark { border-color: rgba(255, 255, 255, 0.3); } .hero_stats__card--dark:hover { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 20px 40px rgba(1, 31, 78, 0.3); } .hero_stats__number { display: block; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 800; margin-bottom: var(--hero-spacing-xs); background: linear-gradient(135deg, var(--hero-white) 0%, rgba(255, 255, 255, 0.9) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .hero_stats__label { display: block; font-size: clamp(0.75rem, 1vw, 0.875rem); color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; line-height: 1.3; } @media (max-width: 768px) { .hero_wrapper { padding: var(--hero-spacing-3xl) 0; } .hero_content { margin-bottom: var(--hero-spacing-2xl); } .hero_title { margin-bottom: var(--hero-spacing-lg); } .hero_stats { grid-template-columns: repeat(2, 1fr); gap: var(--hero-spacing-md); } .hero_stats__card { padding: var(--hero-spacing-lg) var(--hero-spacing-sm); } .hero_stats__number { font-size: clamp(1.25rem, 4vw, 1.75rem); } } @media (max-width: 480px) { .hero_container { padding: 0 var(--hero-spacing-md); } .hero_wrapper { padding: var(--hero-spacing-2xl) 0; } .hero_stats { grid-template-columns: 1fr; } .hero_stats__card--dark { grid-column: 1; } } @media (min-width: 1440px) { .hero_stats { max-width: 1100px; margin: 0 auto; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-light: #F8F9FA; --dn-gray-medium: #E5E7EB; --dn-gray-dark: #6B7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius-sm: 8px; --dn-radius-md: 12px; --dn-radius-lg: 16px; --dn-radius-btn: 14px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-4xl) 0; position: relative; overflow: hidden; } .dn_hero__content { text-align: center; max-width: 1000px; margin: 0 auto; animation: dn_fadeInUp 0.8s ease-out; } .dn_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-gray-medium); margin-bottom: var(--dn-spacing-2xl); line-height: 1.5; } .dn_hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-spacing-lg); margin-top: var(--dn-spacing-2xl); } .dn_stat-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-lg); text-align: center; transition: var(--dn-transition); } .dn_stat-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_stat-card__number { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-sm); } .dn_stat-card__label { color: var(--dn-gray-medium); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_problem-solution { background: var(--dn-gray-light); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-spacing-2xl); } .dn_section-subtitle { text-align: center; color: var(--dn-gray-dark); font-size: clamp(1rem, 2vw, 1.125rem); margin-bottom: var(--dn-spacing-xl); } .dn_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-2xl); } .dn_comparison__side { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); } .dn_comparison__side--problem { border-top: 4px solid var(--dn-accent); } .dn_comparison__side--solution { border-top: 4px solid var(--dn-blue); } .dn_comparison__title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: var(--dn-spacing-lg); color: var(--dn-dark); } .dn_comparison__list { list-style: none; padding: 0; } .dn_comparison__item { display: flex; align-items: flex-start; margin-bottom: var(--dn-spacing-md); line-height: 1.6; } .dn_comparison__icon { font-size: 1.25rem; margin-right: var(--dn-spacing-sm); flex-shrink: 0; } .dn_comparison__icon--negative { color: var(--dn-accent); } .dn_comparison__icon--positive { color: var(--dn-blue); } .dn_cta-section { text-align: center; margin-top: var(--dn-spacing-xl); } .dn_btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius-btn); font-weight: 600; text-decoration: none; transition: var(--dn-transition); cursor: pointer; border: none; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_btn--primary { background: var(--dn-blue); color: var(--dn-white); } .dn_btn--primary:hover { background: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_btn--secondary { background: var(--dn-white); color: var(--dn-primary); border: 2px solid var(--dn-primary); font-size: clamp(0.75rem, 1.25vw, 0.875rem); padding: var(--dn-spacing-sm) var(--dn-spacing-md); } .dn_btn--secondary:hover { background: var(--dn-primary); color: var(--dn-white); } .dn_btn--accent { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--accent:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--large { font-size: clamp(1rem, 2vw, 1.25rem); padding: var(--dn-spacing-lg) var(--dn-spacing-2xl); } .dn_services { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--dn-spacing-xl); } .dn_service-card { background: var(--dn-gray-light); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); position: relative; transition: var(--dn-transition); border: 1px solid var(--dn-gray-medium); display: flex; flex-direction: column; } .dn_service-card:hover { transform: translateY(-8px); box-shadow: var(--dn-shadow-xl); border-color: var(--dn-blue); } .dn_service-card__icon { font-size: 2.5rem; margin-bottom: var(--dn-spacing-md); text-align: center; } .dn_service-card__content { flex: 1; } .dn_service-card__name { color: var(--dn-primary); font-size: clamp(0.875rem, 1.5vw, 1rem); margin-bottom: var(--dn-spacing-xs); } .dn_service-card__title { color: var(--dn-dark); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-spacing-md); line-height: 1.3; } .dn_service-card__description { color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-md); line-height: 1.6; } .dn_service-card__features { list-style: none; padding: 0; margin-bottom: var(--dn-spacing-lg); color: var(--dn-dark); font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_service-card__features li { padding: var(--dn-spacing-xs) 0; } .dn_service-card__stats { text-align: center; padding-top: var(--dn-spacing-lg); border-top: 1px solid var(--dn-gray-medium); margin-top: var(--dn-spacing-lg); } .dn_service-card__roi { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--dn-blue); } .dn_service-card__roi-label { color: var(--dn-gray-dark); font-size: clamp(0.75rem, 1.25vw, 0.875rem); margin-bottom: var(--dn-spacing-sm); } .dn_service-card__price { color: var(--dn-dark); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_pricing { background: var(--dn-gray-light); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-spacing-xl); align-items: stretch; } .dn_pricing-card { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); text-align: center; position: relative; border: 2px solid var(--dn-gray-medium); transition: var(--dn-transition); } .dn_pricing-card:hover { transform: translateY(-8px); box-shadow: var(--dn-shadow-xl); } .dn_pricing-card--featured { border-color: var(--dn-blue); transform: scale(1.05); } .dn_pricing-card--featured:hover { transform: scale(1.05) translateY(-8px); } .dn_pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--dn-accent); color: var(--dn-white); padding: var(--dn-spacing-xs) var(--dn-spacing-lg); border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .dn_pricing-card__name { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-sm); font-weight: 700; } .dn_pricing-card__price { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-primary); margin-bottom: var(--dn-spacing-sm); } .dn_pricing-card__period { font-size: 1rem; font-weight: 400; color: var(--dn-gray-dark); } .dn_pricing-card__description { color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-xl); } .dn_pricing-card__features { list-style: none; padding: 0; margin-bottom: var(--dn-spacing-xl); text-align: left; } .dn_pricing-card__features li { padding: var(--dn-spacing-sm) 0; border-bottom: 1px solid var(--dn-gray-light); } .dn_pricing-card__features a { color: var(--dn-blue); text-decoration: none; } .dn_pricing-card__features a:hover { text-decoration: underline; } .dn_pricing-card__results { padding-top: var(--dn-spacing-lg); border-top: 2px solid var(--dn-gray-light); color: var(--dn-dark); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_roi-calculator { background: var(--dn-secondary); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.5s both; } .dn_roi-calculator .dn_section-title { color: var(--dn-white); } .dn_calculator { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); box-shadow: var(--dn-shadow-xl); } .dn_calculator__title { color: var(--dn-dark); font-size: clamp(1.25rem, 2vw, 1.5rem); text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_calculator__comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-2xl); } .dn_calculator__side { background: var(--dn-gray-light); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-lg); } .dn_calculator__side--current { border-top: 4px solid var(--dn-accent); } .dn_calculator__side--ai { border-top: 4px solid var(--dn-blue); } .dn_calculator__side-title { color: var(--dn-dark); font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-spacing-md); text-align: center; font-weight: 700; } .dn_calculator__metrics { font-size: clamp(0.875rem, 1.25vw, 1rem); line-height: 2; } .dn_calculator__metrics strong { color: var(--dn-dark); } .dn_calculator__metrics hr { margin: var(--dn-spacing-md) 0; border: none; border-top: 1px solid var(--dn-gray-medium); } .dn_calculator__improvement { background: var(--dn-primary); color: var(--dn-white); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); text-align: center; } .dn_calculator__improvement-title { font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-spacing-lg); } .dn_calculator__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--dn-spacing-lg); } .dn_calculator__stat { text-align: center; } .dn_calculator__stat-number { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; display: block; margin-bottom: var(--dn-spacing-xs); } .dn_calculator__stat-label { font-size: clamp(0.75rem, 1.25vw, 0.875rem); opacity: 0.9; } .dn_case-studies { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.6s both; } .dn_case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--dn-spacing-xl); } .dn_case-study { background: var(--dn-gray-light); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); border-left: 4px solid var(--dn-blue); transition: var(--dn-transition); } .dn_case-study:hover { transform: translateX(8px); box-shadow: var(--dn-shadow-lg); } .dn_case-study__title { color: var(--dn-primary); font-size: clamp(1.125rem, 2vw, 1.25rem); margin-bottom: var(--dn-spacing-md); } .dn_case-study__details { margin-bottom: var(--dn-spacing-lg); padding-bottom: var(--dn-spacing-md); border-bottom: 1px solid var(--dn-gray-medium); } .dn_case-study__details p { margin: var(--dn-spacing-xs) 0; color: var(--dn-gray-dark); font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_case-study__results-title { color: var(--dn-dark); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_case-study__results { list-style: none; padding: 0; margin-bottom: var(--dn-spacing-lg); } .dn_case-study__results li { padding: var(--dn-spacing-xs) 0; color: var(--dn-dark); font-size: clamp(0.875rem, 1.25vw, 1rem); } .dn_case-study__outcome { background: var(--dn-white); border-radius: var(--dn-radius-sm); padding: var(--dn-spacing-md); text-align: center; } .dn_case-study__outcome p { margin: var(--dn-spacing-xs) 0; font-weight: 700; color: var(--dn-blue); } .dn_faq { background: var(--dn-gray-light); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.7s both; } .dn_faq-list { max-width: 900px; margin: 0 auto; } .dn_faq-item { background: var(--dn-white); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-lg); transition: var(--dn-transition); border: 1px solid var(--dn-gray-medium); } .dn_faq-item:hover { box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_faq-item__question { color: var(--dn-primary); font-size: clamp(1rem, 1.75vw, 1.125rem); margin-bottom: var(--dn-spacing-md); font-weight: 700; } .dn_faq-item__answer { color: var(--dn-dark); line-height: 1.7; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_final-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-spacing-4xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.8s both; } .dn_final-cta__title { color: var(--dn-white); font-size: clamp(1.75rem, 4vw, 2.5rem); text-align: center; margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_final-cta__subtitle { color: var(--dn-gray-medium); font-size: clamp(1rem, 2vw, 1.25rem); text-align: center; margin-bottom: var(--dn-spacing-2xl); } .dn_audit-offer { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); max-width: 800px; margin: 0 auto var(--dn-spacing-2xl); } .dn_audit-offer__title { color: var(--dn-white); font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin-bottom: var(--dn-spacing-sm); } .dn_audit-offer__subtitle { color: var(--dn-gray-medium); text-align: center; margin-bottom: var(--dn-spacing-xl); } .dn_audit-offer__features { list-style: none; padding: 0; margin-bottom: var(--dn-spacing-xl); color: var(--dn-white); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn_audit-offer__features li { padding: var(--dn-spacing-sm) 0; } .dn_audit-offer__note { text-align: center; color: var(--dn-gray-medium); font-size: clamp(0.875rem, 1.25vw, 1rem); margin-top: var(--dn-spacing-md); } .dn_contact-info { text-align: center; color: var(--dn-white); } .dn_contact-info__ready { font-size: clamp(1rem, 1.75vw, 1.125rem); margin-bottom: var(--dn-spacing-sm); } .dn_contact-info__phone { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_contact-info__message { color: var(--dn-gray-medium); font-size: clamp(0.875rem, 1.5vw, 1rem); } @media (max-width: 768px) { .dn_hero__stats, .dn_comparison, .dn_services__grid, .dn_pricing-grid, .dn_calculator__comparison, .dn_calculator__stats, .dn_case-studies-grid { grid-template-columns: 1fr; } .dn_pricing-card--featured { transform: scale(1); } .dn_pricing-card--featured:hover { transform: translateY(-8px); } .dn_service-card, .dn_case-study { margin-bottom: var(--dn-spacing-md); } } @media (max-width: 480px) { .dn_container { padding: 0 var(--dn-spacing-md); } .dn_hero, .dn_problem-solution, .dn_services, .dn_pricing, .dn_roi-calculator, .dn_case-studies, .dn_faq, .dn_final-cta { padding: var(--dn-spacing-2xl) 0; } .dn_audit-offer { padding: var(--dn-spacing-lg); } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-space-4: 4px; --dn-space-8: 8px; --dn-space-12: 12px; --dn-space-16: 16px; --dn-space-20: 20px; --dn-space-24: 24px; --dn-space-32: 32px; --dn-space-48: 48px; --dn-space-64: 64px; --dn-space-80: 80px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --dn-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --dn-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --dn-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dnFadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-black); background: var(--dn-white); } .dn_container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-space-20); } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-space-80) 0; text-align: center; animation: dnFadeInUp 0.6s ease-out; } .dn_schema-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-space-24); line-height: 1.2; } .dn_schema-hero__subtitle { font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--dn-blue); max-width: 800px; margin: 0 auto; } .dn_schema-stats { background: var(--dn-white); padding: var(--dn-space-64) 0; animation: dnFadeInUp 0.8s ease-out; } .dn_schema-stats__intro { text-align: center; margin-bottom: var(--dn-space-48); } .dn_schema-stats__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--dn-dark); margin-bottom: var(--dn-space-20); font-weight: 700; } .dn_schema-stats__text { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--dn-black); max-width: 800px; margin: 0 auto; line-height: 1.8; } .dn_schema-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dn-space-24); } .dn_schema-platform { background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%); border: 2px solid var(--dn-blue); border-radius: var(--dn-radius); padding: var(--dn-space-32); text-align: center; transition: all var(--dn-transition); } .dn_schema-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-primary); } .dn_schema-platform:nth-child(2) { border-color: var(--dn-secondary); } .dn_schema-platform:nth-child(3) { border-color: var(--dn-blue); } .dn_schema-platform:nth-child(4) { border-color: var(--dn-accent); } .dn_schema-platform__icon { font-size: 2.5rem; display: block; margin-bottom: var(--dn-space-12); } .dn_schema-platform__name { font-size: 1.25rem; font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-space-8); } .dn_schema-platform__share { color: var(--dn-primary); font-weight: 600; } .dn_schema-process { background: #F8F9FA; padding: var(--dn-space-64) 0; animation: dnFadeInUp 1s ease-out; } .dn_schema-process__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-space-48); font-weight: 700; } .dn_schema-decision { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-space-48); box-shadow: var(--dn-shadow-md); } .dn_schema-decision__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dn-primary); margin-bottom: var(--dn-space-32); text-align: center; } .dn_schema-steps { display: grid; gap: var(--dn-space-24); } .dn_schema-step { background: #F8F9FA; padding: var(--dn-space-24); border-radius: var(--dn-radius); border-left: 4px solid var(--dn-blue); transition: all var(--dn-transition); } .dn_schema-step:hover { transform: translateX(8px); box-shadow: var(--dn-shadow-md); } .dn_schema-step--entity { border-left-color: var(--dn-primary); } .dn_schema-step--expertise { border-left-color: var(--dn-secondary); } .dn_schema-step--trust { border-left-color: var(--dn-blue); } .dn_schema-step--geo { border-left-color: var(--dn-accent); } .dn_schema-step__title { color: var(--dn-dark); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--dn-space-12); } .dn_schema-step__desc { color: var(--dn-black); margin-bottom: var(--dn-space-16); line-height: 1.7; } .dn_schema-step__code { background: var(--dn-dark); color: var(--dn-white); padding: var(--dn-space-16); border-radius: var(--dn-radius-sm); font-family: 'Courier New', monospace; font-size: 0.9rem; overflow-x: auto; white-space: pre-wrap; } .dn_schema-comparison { padding: var(--dn-space-64) 0; animation: dnFadeInUp 1.2s ease-out; } .dn_schema-comparison__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-space-20); font-weight: 700; } .dn_schema-comparison__query { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-primary); text-align: center; margin-bottom: var(--dn-space-32); } .dn_schema-comparison__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-space-24); } .dn_schema-card { padding: var(--dn-space-32); border-radius: var(--dn-radius); transition: all var(--dn-transition); } .dn_schema-card--success { background: #E8F5E9; border: 2px solid #4CAF50; } .dn_schema-card--fail { background: #FFEBEE; border: 2px solid var(--dn-accent); } .dn_schema-card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_schema-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--dn-space-20); } .dn_schema-card--success .dn_schema-card__title { color: #2E7D32; } .dn_schema-card--fail .dn_schema-card__title { color: var(--dn-accent); } .dn_schema-card__response { background: var(--dn-white); padding: var(--dn-space-20); border-radius: var(--dn-radius-sm); font-style: italic; margin-bottom: var(--dn-space-16); } .dn_schema-card__result { font-weight: 700; font-size: 1.1rem; } .dn_schema-card--success .dn_schema-card__result { color: #2E7D32; } .dn_schema-card--fail .dn_schema-card__result { color: var(--dn-accent); } .dn_schema-gpt, .dn_schema-google, .dn_schema-perplexity, .dn_schema-voice, .dn_schema-future, .dn_schema-losses, .dn_schema-kpis, .dn_schema-research { padding: var(--dn-space-64) 0; } .dn_schema-gpt { background: #F8F9FA; animation: dnFadeInUp 1.4s ease-out; } .dn_schema-google { background: var(--dn-white); animation: dnFadeInUp 1.6s ease-out; } .dn_schema-perplexity { background: #F8F9FA; animation: dnFadeInUp 1.8s ease-out; } .dn_schema-voice { background: var(--dn-white); animation: dnFadeInUp 2s ease-out; } .dn_schema-future { background: #F8F9FA; animation: dnFadeInUp 2.2s ease-out; } .dn_schema-losses { background: var(--dn-white); animation: dnFadeInUp 2.4s ease-out; } .dn_schema-kpis { background: #F8F9FA; animation: dnFadeInUp 2.6s ease-out; } .dn_schema-research { background: var(--dn-white); animation: dnFadeInUp 2.8s ease-out; } .dn_schema-gpt__title, .dn_schema-google__title, .dn_schema-perplexity__title, .dn_schema-voice__title, .dn_schema-future__title, .dn_schema-losses__title, .dn_schema-kpis__title, .dn_schema-research__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--dn-dark); text-align: center; margin-bottom: var(--dn-space-48); font-weight: 700; padding-bottom: var(--dn-space-16); border-bottom: 2px solid var(--dn-primary); } .dn_schema-gpt__source { background: var(--dn-white); padding: var(--dn-space-24); border-radius: var(--dn-radius); margin-bottom: var(--dn-space-32); border-left: 4px solid var(--dn-blue); } .dn_schema-criteria { background: var(--dn-white); padding: var(--dn-space-32); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); } .dn_schema-criteria__title { color: var(--dn-primary); font-size: 1.5rem; margin-bottom: var(--dn-space-24); } .dn_schema-criteria__list { list-style: none; padding-left: 0; counter-reset: criteria; } .dn_schema-criteria__list > li { counter-increment: criteria; position: relative; padding-left: var(--dn-space-48); margin-bottom: var(--dn-space-24); line-height: 1.8; } .dn_schema-criteria__list > li::before { content: counter(criteria); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--dn-primary); color: var(--dn-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } .dn_schema-criteria__list ul { margin-top: var(--dn-space-12); padding-left: var(--dn-space-20); } .dn_schema-google__card, .dn_schema-perplexity__content, .dn_schema-voice__card, .dn_schema-future__card, .dn_schema-losses__card, .dn_schema-kpis__card, .dn_schema-research__card { background: var(--dn-white); padding: var(--dn-space-32); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); } .dn_schema-google__subtitle { color: var(--dn-secondary); font-size: 1.5rem; margin-bottom: var(--dn-space-24); } .dn_schema-case { background: #E3F2FD; padding: var(--dn-space-24); border-radius: var(--dn-radius); margin-bottom: var(--dn-space-24); } .dn_schema-case h4 { color: var(--dn-dark); margin-bottom: var(--dn-space-16); } .dn_schema-case__code { background: var(--dn-dark); color: #A5D6A7; padding: var(--dn-space-20); border-radius: var(--dn-radius-sm); font-family: 'Courier New', monospace; font-size: 0.9rem; overflow-x: auto; margin-top: var(--dn-space-16); } .dn_schema-insight { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); padding: var(--dn-space-20); border-radius: var(--dn-radius); margin-top: var(--dn-space-24); text-align: center; font-weight: 600; } .dn_schema-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-24); } .dn_schema-metric { background: var(--dn-white); padding: var(--dn-space-24); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); } .dn_schema-metric--rich { border-top: 4px solid var(--dn-blue); } .dn_schema-metric--none { border-top: 4px solid var(--dn-accent); } .dn_schema-metric h4 { color: var(--dn-dark); margin-bottom: var(--dn-space-16); } .dn_schema-metric ul { list-style: none; padding: 0; line-height: 2; } .dn_schema-voice__example { background: #F8F9FA; padding: var(--dn-space-24); border-radius: var(--dn-radius); margin-top: var(--dn-space-24); } .dn_schema-voice__query { font-size: 1.25rem; font-style: italic; color: var(--dn-primary); margin-bottom: var(--dn-space-20); } .dn_schema-voice__response { background: #E8F5E9; padding: var(--dn-space-20); border-radius: var(--dn-radius-sm); margin-bottom: var(--dn-space-20); } .dn_schema-voice__elements ul { padding-left: var(--dn-space-24); line-height: 1.8; } .dn_schema-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-24); } .dn_schema-timeline__item { background: var(--dn-white); padding: var(--dn-space-24); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); } .dn_schema-timeline__item--future { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); border: 2px solid var(--dn-accent); } .dn_schema-timeline__item h4 { color: var(--dn-primary); margin-bottom: var(--dn-space-16); } .dn_schema-timeline__item ul { list-style: none; padding: 0; line-height: 1.8; } .dn_schema-timeline__item li { padding: var(--dn-space-4) 0; } .dn_schema-warning { background: #FFEBEE; border-left: 4px solid var(--dn-accent); padding: var(--dn-space-20); border-radius: var(--dn-radius); margin-top: var(--dn-space-24); } .dn_schema-table { width: 100%; border-collapse: collapse; margin-top: var(--dn-space-24); } .dn_schema-table thead { background: var(--dn-dark); color: var(--dn-white); } .dn_schema-table th { padding: var(--dn-space-16); text-align: left; font-weight: 600; } .dn_schema-table tbody tr { border-bottom: 1px solid #E5E7EB; transition: background var(--dn-transition); } .dn_schema-table tbody tr:hover { background: #F8F9FA; } .dn_schema-table td { padding: var(--dn-space-16); } .dn_schema-table__loss { color: var(--dn-accent); font-weight: 700; } .dn_schema-table__note { font-size: 0.9rem; color: #6B7280; margin-top: var(--dn-space-12); font-style: italic; } .dn_schema-checklist { list-style: none; padding: 0; } .dn_schema-checklist li { position: relative; padding-left: var(--dn-space-32); margin-bottom: var(--dn-space-16); line-height: 1.8; } .dn_schema-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-size: 1.25rem; font-weight: 700; } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: var(--dn-space-80) 0; text-align: center; animation: dnFadeInUp 3s ease-out; } .dn_schema-cta__title { font-size: clamp(2rem, 4vw, 3rem); color: var(--dn-white); margin-bottom: var(--dn-space-20); font-weight: 700; } .dn_schema-cta__text { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-white); margin-bottom: var(--dn-space-32); max-width: 600px; margin-left: auto; margin-right: auto; } .dn_schema-cta__buttons { display: flex; gap: var(--dn-space-20); justify-content: center; flex-wrap: wrap; } .dn_btn { display: inline-block; padding: var(--dn-space-16) var(--dn-space-32); border-radius: 14px; font-weight: 600; text-decoration: none; transition: all var(--dn-transition); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--primary:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 3px; } .dn_btn--primary:active { transform: translateY(0); } .dn_btn--secondary { background: transparent; color: var(--dn-white); border: 2px solid var(--dn-white); } .dn_btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); transform: translateY(-2px); } .dn_btn--secondary:focus-visible { outline: 2px solid var(--dn-white); outline-offset: 3px; } .dn_btn--secondary:active { transform: translateY(0); } @media (max-width: 768px) { .dn_container { padding: 0 var(--dn-space-16); } .dn_schema-platforms, .dn_schema-comparison__grid, .dn_schema-metrics, .dn_schema-timeline { grid-template-columns: 1fr; } .dn_schema-table { font-size: 0.875rem; } .dn_schema-table th, .dn_schema-table td { padding: var(--dn-space-12); } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_btn { width: 100%; max-width: 300px; } .dn_schema-decision { padding: var(--dn-space-24); } .dn_schema-criteria__list > li { padding-left: var(--dn-space-32); } } @media (max-width: 480px) { .dn_schema-hero { padding: var(--dn-space-48) 0; } .dn_schema-stats, .dn_schema-process, .dn_schema-comparison, .dn_schema-gpt, .dn_schema-google, .dn_schema-perplexity, .dn_schema-voice, .dn_schema-future, .dn_schema-losses, .dn_schema-kpis, .dn_schema-research, .dn_schema-cta { padding: var(--dn-space-48) 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-schema-primary: #194A9A; --dn-schema-secondary: #2F62AD; --dn-schema-blue: #348EDF; --dn-schema-accent: #DF4756; --dn-schema-dark: #011F4E; --dn-schema-black: #000000; --dn-schema-white: #FFFFFF; --dn-schema-gray-50: #F9FAFB; --dn-schema-gray-100: #F3F4F6; --dn-schema-gray-200: #E5E7EB; --dn-schema-gray-300: #D1D5DB; --dn-schema-gray-600: #4B5563; --dn-schema-gray-700: #374151; --dn-schema-spacing-xs: 4px; --dn-schema-spacing-sm: 8px; --dn-schema-spacing-md: 16px; --dn-schema-spacing-lg: 24px; --dn-schema-spacing-xl: 32px; --dn-schema-spacing-2xl: 48px; --dn-schema-spacing-3xl: 64px; --dn-schema-spacing-4xl: 96px; --dn-schema-radius: 14px; --dn-schema-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); --dn-schema-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --dn-schema-transition: 300ms ease; } @media (prefers-reduced-motion: no-preference) { @keyframes dn_schema-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-section, .dn_schema-example, .dn_schema-tools, .dn_schema-practices { animation: dn_schema-fadeInUp 0.6s ease-out; } } .dn_schema-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-schema-gray-700); background: var(--dn-schema-white); } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-schema-dark) 0%, var(--dn-schema-primary) 100%); padding: clamp(var(--dn-schema-spacing-3xl), 8vw, var(--dn-schema-spacing-4xl)) var(--dn-schema-spacing-lg); text-align: center; position: relative; overflow: hidden; } .dn_schema-hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_schema-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-lg); line-height: 1.2; position: relative; z-index: 1; } .dn_schema-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-schema-blue); max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .dn_schema-nav { background: var(--dn-schema-gray-50); padding: var(--dn-schema-spacing-2xl) 0; border-bottom: 1px solid var(--dn-schema-gray-200); } .dn_schema-section { padding: var(--dn-schema-spacing-3xl) 0; background: var(--dn-schema-white); } .dn_schema-section--alt { background: var(--dn-schema-gray-50); } .dn_schema-section--tools { background: linear-gradient(to bottom, var(--dn-schema-white) 0%, var(--dn-schema-gray-50) 100%); } .dn_schema-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-schema-dark); text-align: center; margin-bottom: var(--dn-schema-spacing-2xl); position: relative; padding-bottom: var(--dn-schema-spacing-lg); } .dn_schema-section__title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--dn-schema-blue); border-radius: 2px; } .dn_schema-example { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); box-shadow: var(--dn-schema-shadow); padding: var(--dn-schema-spacing-xl); margin-bottom: var(--dn-schema-spacing-xl); } .dn_schema-section--alt .dn_schema-example { box-shadow: var(--dn-schema-shadow-lg); } .dn_schema-example__header { margin-bottom: var(--dn-schema-spacing-lg); padding-bottom: var(--dn-schema-spacing-lg); border-bottom: 2px solid var(--dn-schema-gray-100); } .dn_schema-example__label, .dn_schema-example__features { font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--dn-schema-gray-600); margin: var(--dn-schema-spacing-xs) 0; } .dn_schema-example__label strong, .dn_schema-example__features strong { color: var(--dn-schema-primary); } .dn_schema-example__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); font-weight: 600; } .dn_schema-code { background: var(--dn-schema-dark); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-lg); overflow-x: auto; margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-code pre { margin: 0; font-family: 'Courier New', Courier, monospace; font-size: clamp(0.75rem, 1.2vw, 0.875rem); line-height: 1.5; } .dn_schema-code code { color: #F8F8F2; white-space: pre; color:#000000!important; } .dn_schema-checklist { background: var(--dn-schema-gray-50); border-left: 4px solid var(--dn-schema-blue); padding: var(--dn-schema-spacing-lg); border-radius: var(--dn-schema-radius); } .dn_schema-checklist__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-md); font-weight: 600; } .dn_schema-checklist__list { list-style: none; padding: 0; margin: 0; } .dn_schema-checklist__list li { padding: var(--dn-schema-spacing-sm) 0; padding-left: var(--dn-schema-spacing-xl); position: relative; color: var(--dn-schema-gray-700); line-height: 1.6; } .dn_schema-checklist__list li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-schema-blue); font-weight: bold; font-size: 1.125rem; } .dn_schema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: var(--dn-schema-spacing-xl); } .dn_schema-tools { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-2xl); box-shadow: var(--dn-schema-shadow-lg); } .dn_schema-tools__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-lg); font-weight: 600; } .dn_schema-tools__list { list-style-type: decimal; padding-left: var(--dn-schema-spacing-lg); line-height: 2; color: var(--dn-schema-gray-700); } .dn_schema-tools__list li { padding: var(--dn-schema-spacing-sm) 0; } .dn_schema-tools__list strong { color: var(--dn-schema-dark); } .dn_link { color: var(--dn-schema-primary); text-decoration: none; transition: color var(--dn-schema-transition); border-bottom: 1px solid transparent; } .dn_link:hover { color: var(--dn-schema-blue); border-bottom-color: var(--dn-schema-blue); } .dn_link:focus-visible { outline: 2px solid var(--dn-schema-blue); outline-offset: 2px; border-radius: 2px; } .dn_schema-warning { background: var(--dn-schema-accent); color: var(--dn-schema-white); padding: var(--dn-schema-spacing-lg); border-radius: var(--dn-schema-radius); margin-top: var(--dn-schema-spacing-xl); } .dn_schema-warning__title { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: var(--dn-schema-spacing-md); font-weight: 600; } .dn_schema-warning__list { list-style: none; padding: 0; margin: 0; } .dn_schema-warning__list li { padding: var(--dn-schema-spacing-xs) 0; padding-left: var(--dn-schema-spacing-lg); position: relative; line-height: 1.6; } .dn_schema-warning__list li::before { content: '×'; position: absolute; left: 0; font-weight: bold; font-size: 1.25rem; } .dn_schema-practices { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-2xl); box-shadow: var(--dn-schema-shadow); } .dn_schema-practices__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-lg); font-weight: 600; } .dn_schema-practices__list { list-style: none; padding: 0; margin: 0; } .dn_schema-practices__list li { padding: var(--dn-schema-spacing-md) 0; border-bottom: 1px solid var(--dn-schema-gray-100); color: var(--dn-schema-gray-700); line-height: 1.6; } .dn_schema-practices__list li:last-child { border-bottom: none; } .dn_schema-practices__list strong { color: var(--dn-schema-dark); } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-schema-primary) 0%, var(--dn-schema-secondary) 100%); padding: var(--dn-schema-spacing-4xl) var(--dn-schema-spacing-lg); text-align: center; color: var(--dn-schema-white); position: relative; overflow: hidden; } .dn_schema-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); pointer-events: none; } .dn_schema-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: var(--dn-schema-spacing-md); position: relative; z-index: 1; } .dn_schema-cta__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: var(--dn-schema-spacing-xl); opacity: 0.95; position: relative; z-index: 1; } .dn_schema-cta__buttons { display: flex; gap: var(--dn-schema-spacing-lg); justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } .dn_btn { display: inline-block; padding: var(--dn-schema-spacing-md) var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); text-decoration: none; transition: all var(--dn-schema-transition); border: 2px solid transparent; min-width: 180px; text-align: center; } .dn_btn--primary { background: var(--dn-schema-white); color: var(--dn-schema-primary); border-color: var(--dn-schema-white); } .dn_btn--primary:hover { background: var(--dn-schema-gray-50); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .dn_btn--primary:active { transform: translateY(0); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-schema-white); outline-offset: 3px; } .dn_btn--secondary { background: transparent; color: var(--dn-schema-white); border-color: var(--dn-schema-white); } .dn_btn--secondary:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .dn_btn--secondary:active { transform: translateY(0); } .dn_btn--secondary:focus-visible { outline: 3px solid var(--dn-schema-white); outline-offset: 3px; } @media (max-width: 768px) { .dn_schema-section { padding: var(--dn-schema-spacing-2xl) 0; } .dn_schema-example { padding: var(--dn-schema-spacing-lg); } .dn_schema-code { padding: var(--dn-schema-spacing-md); } .dn_schema-grid { grid-template-columns: 1fr; } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_btn { width: 100%; max-width: 280px; } } @media (max-width: 480px) { .dn_schema-hero { padding: var(--dn-schema-spacing-2xl) var(--dn-schema-spacing-md); } .dn_schema-hero__title { font-size: 1.75rem; } .dn_schema-hero__subtitle { font-size: 1rem; } .dn_schema-section__title { font-size: 1.5rem; } .dn_schema-tools, .dn_schema-practices { padding: var(--dn-schema-spacing-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --dn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; line-height: 1.6; color: var(--dn-black); } .dn_schema-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-spacing-lg); } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; text-align: center; animation: dn_fadeInUp 0.6s ease-out; } .dn_schema-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_schema-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-blue); max-width: 800px; margin: 0 auto; } .dn_schema-stats { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out; } .dn_schema-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-xl); } .dn_schema-stat { text-align: center; padding: var(--dn-spacing-xl); background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-md); transition: transform var(--dn-transition); } .dn_schema-stat:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_schema-stat__label { font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--dn-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--dn-spacing-md); } .dn_schema-stat__value { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_schema-stat__value--standard { color: var(--dn-accent); } .dn_schema-stat__value--rich { color: var(--dn-blue); } .dn_schema-stat__desc { color: #6c757d; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-content { background: #f8f9fa; padding: var(--dn-spacing-3xl) 0; } .dn_schema-section { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-spacing-2xl); margin-bottom: var(--dn-spacing-2xl); box-shadow: var(--dn-shadow-sm); animation: dn_fadeInUp 1s ease-out; } .dn_schema-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); padding-bottom: var(--dn-spacing-md); border-bottom: 3px solid var(--dn-primary); } .dn_schema-case { margin-bottom: var(--dn-spacing-xl); } .dn_schema-case__title { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); } .dn_schema-case__meta { background: #f8f9fa; padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-sm); margin-bottom: var(--dn-spacing-lg); } .dn_schema-case__meta p { margin-bottom: var(--dn-spacing-sm); color: #495057; } .dn_schema-case__meta p:last-child { margin-bottom: 0; } .dn_schema-link { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-transition); } .dn_schema-link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_schema-link:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; border-radius: 2px; } .dn_schema-code { background: #1e1e1e; border-radius: var(--dn-radius-sm); padding: var(--dn-spacing-lg); margin: var(--dn-spacing-lg) 0; overflow-x: auto; } .dn_schema-code pre { margin: 0; } .dn_schema-code code { color: #e1e4e8; font-family: 'Consolas', 'Monaco', monospace; font-size: clamp(0.75rem, 1.2vw, 0.875rem); line-height: 1.6; white-space: pre; } .dn_schema-highlight { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border-left: 4px solid var(--dn-blue); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-sm); } .dn_schema-highlight__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-dark); font-weight: 600; margin-bottom: var(--dn-spacing-md); } .dn_schema-list { list-style: none; padding: 0; } .dn_schema-list li { position: relative; padding-left: var(--dn-spacing-lg); margin-bottom: var(--dn-spacing-sm); color: #495057; } .dn_schema-list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_schema-card { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); } .dn_schema-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_schema-table-wrapper { overflow-x: auto; margin: var(--dn-spacing-lg) 0; } .dn_schema-table { width: 100%; border-collapse: collapse; background: var(--dn-white); box-shadow: var(--dn-shadow-sm); border-radius: var(--dn-radius); overflow: hidden; } .dn_schema-table thead { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); } .dn_schema-table th { padding: var(--dn-spacing-md); text-align: left; color: var(--dn-white); font-weight: 600; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-table tbody tr { border-bottom: 1px solid #e9ecef; transition: background var(--dn-transition); } .dn_schema-table tbody tr:hover { background: #f8f9fa; } .dn_schema-table tbody tr:last-child { border-bottom: none; } .dn_schema-table td { padding: var(--dn-spacing-md); color: #495057; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-table__highlight { color: var(--dn-blue); font-weight: 700; } .dn_schema-serp-preview { margin-top: var(--dn-spacing-lg); } .dn_schema-serp-preview__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-dark); font-weight: 600; margin-bottom: var(--dn-spacing-md); } .dn_schema-serp-preview__box { background: var(--dn-white); border: 1px solid #ddd; border-radius: var(--dn-radius-sm); padding: var(--dn-spacing-lg); box-shadow: var(--dn-shadow-sm); } .dn_schema-serp-preview__link { color: #1a0dab; font-size: clamp(1.125rem, 1.5vw, 1.25rem); text-decoration: underline; margin-bottom: var(--dn-spacing-xs); } .dn_schema-serp-preview__stars { color: #fbbc04; margin-bottom: var(--dn-spacing-xs); } .dn_schema-serp-preview__desc { color: #70757a; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-lg); } .dn_schema-comparison__card { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); border-top: 4px solid var(--dn-blue); transition: transform var(--dn-transition); } .dn_schema-comparison__card:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); } .dn_schema-comparison__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_schema-timeline { background: var(--dn-white); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-sm); } .dn_schema-timeline__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); } .dn_schema-timeline__grid { display: flex; flex-direction: column; gap: var(--dn-spacing-lg); } .dn_schema-timeline__item { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--dn-spacing-md); align-items: center; padding: var(--dn-spacing-md) 0; } .dn_schema-timeline__period { font-weight: 600; color: var(--dn-primary); font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-timeline__bar { height: 30px; background: linear-gradient(90deg, var(--dn-blue) var(--width), #e9ecef var(--width)); border-radius: 15px; position: relative; } .dn_schema-timeline__bar--15 { --width: 15%; } .dn_schema-timeline__bar--40 { --width: 40%; } .dn_schema-timeline__bar--70 { --width: 70%; } .dn_schema-timeline__bar--95 { --width: 95%; } .dn_schema-timeline__value { font-weight: 700; color: var(--dn-blue); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_schema-timeline__desc { grid-column: 1 / -1; color: #6c757d; font-size: clamp(0.875rem, 1.2vw, 1rem); } .dn_schema-methodology { background: #f8f9fa; padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); border-left: 4px solid var(--dn-primary); } .dn_schema-methodology__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-secondary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; text-align: center; } .dn_schema-cta__title { font-size: clamp(2rem, 4vw, 3rem); color: var(--dn-white); margin-bottom: var(--dn-spacing-md); } .dn_schema-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-white); margin-bottom: var(--dn-spacing-xl); opacity: 0.95; } .dn_schema-cta__buttons { display: flex; gap: var(--dn-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_schema-btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius); font-weight: 600; text-decoration: none; transition: all var(--dn-transition); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_schema-btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_schema-btn--primary:hover { background: #c73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_schema-btn--primary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 3px; } .dn_schema-btn--secondary { background: transparent; color: var(--dn-white); border: 2px solid var(--dn-white); } .dn_schema-btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn_schema-btn--secondary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 3px; } @media (max-width: 768px) { .dn_schema-container { padding: 0 var(--dn-spacing-md); } .dn_schema-section { padding: var(--dn-spacing-lg); } .dn_schema-stats__grid { grid-template-columns: 1fr; } .dn_schema-comparison { grid-template-columns: 1fr; } .dn_schema-timeline__item { grid-template-columns: 1fr; text-align: center; } .dn_schema-timeline__bar { width: 100%; } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_schema-btn { width: 100%; max-width: 300px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } :root { --dn-schema-primary: #194A9A; --dn-schema-secondary: #2F62AD; --dn-schema-blue: #348EDF; --dn-schema-accent: #DF4756; --dn-schema-dark: #011F4E; --dn-schema-white: #FFFFFF; --dn-schema-gray-50: #F8F9FA; --dn-schema-gray-100: #F1F5F9; --dn-schema-gray-200: #E2E8F0; --dn-schema-gray-300: #CBD5E1; --dn-schema-gray-600: #475569; --dn-schema-gray-700: #334155; --dn-schema-gray-800: #1E293B; --dn-schema-spacing-xs: 4px; --dn-schema-spacing-sm: 8px; --dn-schema-spacing-md: 16px; --dn-schema-spacing-lg: 24px; --dn-schema-spacing-xl: 32px; --dn-schema-spacing-2xl: 48px; --dn-schema-spacing-3xl: 64px; --dn-schema-radius: 14px; --dn-schema-radius-sm: 8px; --dn-schema-radius-lg: 20px; --dn-schema-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --dn-schema-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --dn-schema-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --dn-schema-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dn-schema-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn-schema-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dn-schema-gray-800); } .dn-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-schema-spacing-lg); } .dn-schema-hero { background: linear-gradient(135deg, var(--dn-schema-dark) 0%, var(--dn-schema-primary) 100%); padding: clamp(var(--dn-schema-spacing-3xl), 8vw, 120px) 0; animation: dn-schema-fadeInUp 0.8s ease; } .dn-schema-hero__content { text-align: center; max-width: 900px; margin: 0 auto; } .dn-schema-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-lg); line-height: 1.2; } .dn-schema-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-schema-blue); font-weight: 500; } .dn-schema-intro { padding: var(--dn-schema-spacing-3xl) 0; background: var(--dn-schema-white); animation: dn-schema-fadeInUp 0.9s ease; } .dn-schema-intro__text { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.8; color: var(--dn-schema-gray-700); max-width: 900px; margin: 0 auto; } .dn-schema-stats { padding: var(--dn-schema-spacing-2xl) 0; background: var(--dn-schema-gray-50); animation: dn-schema-fadeInUp 1s ease; } .dn-schema-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-schema-spacing-xl); max-width: 700px; margin: 0 auto; } .dn-schema-stats__card { background: var(--dn-schema-white); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); text-align: center; box-shadow: var(--dn-schema-shadow-sm); transition: transform var(--dn-schema-transition); } .dn-schema-stats__card:hover { transform: translateY(-4px); box-shadow: var(--dn-schema-shadow-md); } .dn-schema-stats__card--standard { border-top: 4px solid var(--dn-schema-gray-600); } .dn-schema-stats__card--rich { border-top: 4px solid var(--dn-schema-blue); } .dn-schema-stats__title { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-md); } .dn-schema-stats__number { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; margin: var(--dn-schema-spacing-md) 0; } .dn-schema-stats__card--standard .dn-schema-stats__number { color: var(--dn-schema-gray-600); } .dn-schema-stats__card--rich .dn-schema-stats__number { color: var(--dn-schema-blue); } .dn-schema-stats__label { color: var(--dn-schema-gray-600); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-schema-section { padding: var(--dn-schema-spacing-3xl) 0; background: var(--dn-schema-white); animation: dn-schema-fadeInUp 1.1s ease; } .dn-schema-section--alt { background: var(--dn-schema-gray-50); } .dn-schema-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-2xl); padding-bottom: var(--dn-schema-spacing-md); border-bottom: 3px solid var(--dn-schema-primary); } .dn-schema-case { background: var(--dn-schema-gray-50); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); border-left: 4px solid var(--dn-schema-primary); } .dn-schema-case__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-lg); } .dn-schema-case__meta { margin-bottom: var(--dn-schema-spacing-lg); line-height: 1.8; } .dn-schema-case__meta p { margin-bottom: var(--dn-schema-spacing-sm); color: var(--dn-schema-gray-700); } .dn-schema-link { color: var(--dn-schema-blue); text-decoration: none; transition: color var(--dn-schema-transition); } .dn-schema-link:hover { color: var(--dn-schema-primary); text-decoration: underline; } .dn-schema-link:focus-visible { outline: 2px solid var(--dn-schema-blue); outline-offset: 2px; } .dn-schema-code { background: var(--dn-schema-dark); color: #F8F8F2; padding: var(--dn-schema-spacing-lg); border-radius: var(--dn-schema-radius-sm); overflow-x: auto; margin: var(--dn-schema-spacing-lg) 0; } .dn-schema-code pre { margin: 0; font-size: clamp(0.875rem, 1.5vw, 1rem); font-family: 'Courier New', monospace; } .dn-schema-code code { display: block; line-height: 1.5; } .dn-schema-success { background: linear-gradient(135deg, #E8F5E9, #F1F8E9); border-left: 4px solid var(--dn-schema-blue); padding: var(--dn-schema-spacing-lg); margin-top: var(--dn-schema-spacing-lg); border-radius: var(--dn-schema-radius-sm); } .dn-schema-success__list { list-style: none; padding: 0; margin: var(--dn-schema-spacing-md) 0 0 0; } .dn-schema-success__list li { position: relative; padding-left: var(--dn-schema-spacing-xl); margin-bottom: var(--dn-schema-spacing-sm); color: var(--dn-schema-gray-700); } .dn-schema-success__list li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-schema-blue); font-weight: 700; font-size: 1.25rem; } .dn-schema-table-wrapper { background: var(--dn-schema-white); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); box-shadow: var(--dn-schema-shadow-sm); } .dn-schema-table__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); } .dn-schema-table { width: 100%; border-collapse: collapse; overflow: hidden; } .dn-schema-table thead { background: var(--dn-schema-primary); } .dn-schema-table th { padding: var(--dn-schema-spacing-md); text-align: left; color: var(--dn-schema-white); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-schema-table th:nth-child(2) { text-align: center; } .dn-schema-table tbody tr { border-bottom: 1px solid var(--dn-schema-gray-200); transition: background var(--dn-schema-transition); } .dn-schema-table tbody tr:hover { background: var(--dn-schema-gray-50); } .dn-schema-table tbody tr:nth-child(even) { background: var(--dn-schema-gray-50); } .dn-schema-table td { padding: var(--dn-schema-spacing-md); color: var(--dn-schema-gray-700); font-size: clamp(0.875rem, 1.5vw, 1rem); } .dn-schema-table__highlight { color: var(--dn-schema-blue); font-weight: 700; text-align: center; } .dn-schema-serp { background: var(--dn-schema-white); padding: var(--dn-schema-spacing-lg); border-radius: var(--dn-schema-radius-sm); border: 2px solid var(--dn-schema-gray-300); margin-top: var(--dn-schema-spacing-lg); } .dn-schema-serp__preview { margin-top: var(--dn-schema-spacing-md); } .dn-schema-serp__title { color: #1a0dab; font-size: clamp(1.125rem, 2vw, 1.25rem); display: block; margin-bottom: var(--dn-schema-spacing-sm); text-decoration: underline; cursor: pointer; } .dn-schema-serp__rating { margin-bottom: var(--dn-schema-spacing-sm); } .dn-schema-serp__stars { color: #fbbc04; font-size: 1.125rem; margin-right: var(--dn-schema-spacing-sm); } .dn-schema-serp__count { color: #70757a; font-size: 0.875rem; } .dn-schema-serp__desc { color: #70757a; line-height: 1.5; display: block; } .dn-schema-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-schema-spacing-xl); } .dn-schema-compare__card { background: var(--dn-schema-gray-50); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); border-top: 4px solid var(--dn-schema-primary); } .dn-schema-compare__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); } .dn-schema-compare__list { list-style: none; padding: 0; line-height: 2; } .dn-schema-compare__list li { padding: var(--dn-schema-spacing-sm) 0; color: var(--dn-);} :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #FFFFFF; --dn-gray-100: #F8F9FA; --dn-gray-200: #E5E7EB; --dn-gray-600: #6B7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); --dn-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); --dn-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .dn_schema-page { min-height: 100vh; background: var(--dn-white); color: var(--dn-black); line-height: 1.6; } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-blue) 100%); padding: var(--dn-spacing-3xl) 0; margin-bottom: var(--dn-spacing-3xl); animation: dn_fadeInUp 0.8s ease; } .dn_schema-hero__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); text-align: center; } .dn_schema-hero__lead { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; } .dn_schema-hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-gray-200); text-align: center; max-width: 800px; margin: 0 auto; } .dn_schema-section { padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease; animation-fill-mode: both; } .dn_schema-section:nth-child(2) { animation-delay: 0.1s; } .dn_schema-section:nth-child(3) { animation-delay: 0.2s; } .dn_schema-section:nth-child(4) { animation-delay: 0.3s; } .dn_schema-section:nth-child(5) { animation-delay: 0.4s; } .dn_schema-section:nth-child(6) { animation-delay: 0.5s; } .dn_schema-section:nth-child(7) { animation-delay: 0.6s; } .dn_schema-section:nth-child(8) { animation-delay: 0.7s; } .dn_schema-section:nth-child(9) { animation-delay: 0.8s; } .dn_schema-section:nth-child(10) { animation-delay: 0.9s; } .dn_schema-section--gray { background: var(--dn-gray-100); } .dn_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); font-weight: 700; border-bottom: 3px solid var(--dn-primary); padding-bottom: var(--dn-spacing-md); } .dn_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-primary); margin: var(--dn-spacing-xl) 0 var(--dn-spacing-lg); font-weight: 600; } .dn_schema-stat { background: linear-gradient(135deg, var(--dn-primary), var(--dn-blue)); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); margin: var(--dn-spacing-xl) 0; text-align: center; } .dn_schema-stat__value { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--dn-white); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_schema-stat__label { color: var(--dn-white); opacity: 0.95; font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_schema-list { list-style: none; padding: 0; margin: var(--dn-spacing-lg) 0; } .dn_schema-list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-xl); position: relative; line-height: 1.8; } .dn_schema-list li::before { content: "✓"; position: absolute; left: 0; color: var(--dn-blue); font-weight: 700; } .dn_schema-list--numbered { counter-reset: list; } .dn_schema-list--numbered li { counter-increment: list; } .dn_schema-list--numbered li::before { content: counter(list) "."; color: var(--dn-accent); } .dn_link { color: var(--dn-blue); text-decoration: none; transition: var(--dn-transition); font-weight: 600; } .dn_link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_link:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_schema-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-lg); margin: var(--dn-spacing-xl) 0; } .dn_schema-stats__item { background: var(--dn-white); border: 2px solid var(--dn-gray-200); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); text-align: center; transition: var(--dn-transition); } .dn_schema-stats__item:hover { transform: translateY(-5px); box-shadow: var(--dn-shadow-lg); border-color: var(--dn-blue); } .dn_schema-stats__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-gray-600); margin-bottom: var(--dn-spacing-sm); } .dn_schema-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--dn-primary); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_schema-stats__desc { color: var(--dn-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_schema-firm { background: var(--dn-white); border-left: 4px solid var(--dn-primary); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); margin-bottom: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-sm); transition: var(--dn-transition); } .dn_schema-firm:hover { box-shadow: var(--dn-shadow-lg); transform: translateX(5px); } .dn_schema-firm__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); font-weight: 700; } .dn_schema-code { background: var(--dn-dark); color: var(--dn-gray-200); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius); overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.5; margin: var(--dn-spacing-lg) 0; } .dn_schema-example { background: var(--dn-white); border: 2px solid var(--dn-primary); border-radius: var(--dn-radius); margin-bottom: var(--dn-spacing-lg); overflow: hidden; } .dn_schema-example[open] .dn_schema-example__header { background: var(--dn-primary); color: var(--dn-white); } .dn_schema-example__header { background: linear-gradient(135deg, var(--dn-dark), var(--dn-primary)); color: var(--dn-white); padding: var(--dn-spacing-lg); cursor: pointer; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.125rem); transition: var(--dn-transition); } .dn_schema-example__header:hover { background: linear-gradient(135deg, var(--dn-primary), var(--dn-blue)); } .dn_schema-example__header:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_schema-example__header::-webkit-details-marker { display: none; } .dn_schema-example__header::before { content: "▶ "; display: inline-block; transition: var(--dn-transition); } .dn_schema-example[open] .dn_schema-example__header::before { transform: rotate(90deg); } .dn_schema-example__content { padding: var(--dn-spacing-xl); } .dn_schema-highlight { background: linear-gradient(135deg, #E3F2FD, #F0F9FF); border-left: 4px solid var(--dn-blue); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); margin: var(--dn-spacing-xl) 0; } .dn_schema-highlight__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_schema-qa { background: var(--dn-gray-100); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius); margin: var(--dn-spacing-xl) 0; } .dn_schema-qa__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_schema-tactics, .dn_schema-tools, .dn_schema-success, .dn_schema-future, .dn_schema-citations { background: var(--dn-white); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-sm); margin: var(--dn-spacing-xl) 0; } .dn_schema-tactics__title, .dn_schema-tools__title, .dn_schema-success__title, .dn_schema-future__title, .dn_schema-citations__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_schema-alert { background: #FFF5F5; border-left: 4px solid var(--dn-accent); border-radius: var(--dn-radius); padding: var(--dn-spacing-xl); margin: var(--dn-spacing-xl) 0; } .dn_schema-alert__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--dn-accent); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-dark), var(--dn-primary)); padding: var(--dn-spacing-3xl) 0; margin-top: var(--dn-spacing-3xl); text-align: center; animation: dn_fadeInUp 1s ease; } .dn_schema-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); font-weight: 700; } .dn_schema-cta__text { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--dn-gray-200); margin-bottom: var(--dn-spacing-xl); max-width: 700px; margin-left: auto; margin-right: auto; } .dn_schema-cta__buttons { display: flex; gap: var(--dn-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius); font-weight: 600; text-decoration: none; transition: var(--dn-transition); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-accent); outline-offset: 3px; } .dn_btn--secondary { background: transparent; color: var(--dn-white); border: 2px solid var(--dn-white); } .dn_btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn_btn--secondary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 3px; } @media (max-width: 768px) { .dn_schema-stats { grid-template-columns: 1fr; } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_btn { width: 100%; max-width: 300px; } .dn_schema-firm, .dn_schema-example__content, .dn_schema-highlight, .dn_schema-qa, .dn_schema-tactics, .dn_schema-tools, .dn_schema-success, .dn_schema-future, .dn_schema-citations, .dn_schema-alert { padding: var(--dn-spacing-lg); } .dn_schema-code { font-size: 0.75rem; padding: var(--dn-spacing-md); } } @media (max-width: 480px) { .dn_schema-hero { padding: var(--dn-spacing-2xl) var(--dn-spacing-lg); } .dn_schema-section { padding: var(--dn-spacing-2xl) 0; } } :root { --dn-schema-primary: #194A9A; --dn-schema-secondary: #2F62AD; --dn-schema-blue: #348EDF; --dn-schema-accent: #DF4756; --dn-schema-dark: #011F4E; --dn-schema-white: #FFFFFF; --dn-schema-black: #000000; --dn-schema-gray-50: #F8F9FA; --dn-schema-gray-100: #E9ECEF; --dn-schema-gray-200: #DEE2E6; --dn-schema-gray-600: #6C757D; --dn-schema-gray-700: #495057; --dn-schema-spacing-xs: 4px; --dn-schema-spacing-sm: 8px; --dn-schema-spacing-md: 16px; --dn-schema-spacing-lg: 24px; --dn-schema-spacing-xl: 32px; --dn-schema-spacing-xxl: 48px; --dn-schema-spacing-xxxl: 64px; --dn-schema-radius: 14px; --dn-schema-radius-sm: 8px; --dn-schema-shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --dn-schema-shadow-md: 0 4px 8px rgba(0,0,0,0.08); --dn-schema-shadow-lg: 0 8px 16px rgba(0,0,0,0.12); --dn-schema-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_schema-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-wrapper { min-height: 100vh; background: var(--dn-schema-white); } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-schema-dark) 0%, var(--dn-schema-primary) 100%); padding: clamp(var(--dn-schema-spacing-xxxl), 8vw, 120px) var(--dn-schema-spacing-lg); animation: dn_schema-fadeInUp 0.6s ease-out; } .dn_schema-hero__content { max-width: 900px; margin: 0 auto; text-align: center; } .dn_schema-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-lg); line-height: 1.2; } .dn_schema-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--dn-schema-blue); font-weight: 400; opacity: 0.95; } .dn_schema-toc { background: var(--dn-schema-gray-50); padding: var(--dn-schema-spacing-xxl) 0; animation: dn_schema-fadeInUp 0.8s ease-out; } .dn_schema-section { padding: var(--dn-schema-spacing-xxxl) 0; background: var(--dn-schema-white); animation: dn_schema-fadeInUp 1s ease-out; } .dn_schema-section--alt { background: var(--dn-schema-gray-50); } .dn_schema-section--tools { background: linear-gradient(to bottom, var(--dn-schema-gray-50), var(--dn-schema-white)); } .dn_schema-section__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-xxl); text-align: center; position: relative; padding-bottom: var(--dn-schema-spacing-lg); } .dn_schema-section__title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--dn-schema-blue); border-radius: 2px; } .dn_schema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--dn-schema-spacing-xl); } .dn_schema-card { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); box-shadow: var(--dn-schema-shadow-md); overflow: hidden; transition: var(--dn-schema-transition); } .dn_schema-card:hover { transform: translateY(-4px); box-shadow: var(--dn-schema-shadow-lg); } .dn_schema-section--alt .dn_schema-card { border: 1px solid var(--dn-schema-gray-200); } .dn_schema-card__header { padding: var(--dn-schema-spacing-lg); background: linear-gradient(135deg, var(--dn-schema-primary), var(--dn-schema-secondary)); color: var(--dn-schema-white); } .dn_schema-card__label { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; margin-bottom: var(--dn-schema-spacing-sm); } .dn_schema-card__features { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.9; } .dn_schema-card__subtitle { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--dn-schema-primary); padding: var(--dn-schema-spacing-lg) var(--dn-schema-spacing-lg) var(--dn-schema-spacing-md); } .dn_schema-code { background: var(--dn-schema-dark); padding: var(--dn-schema-spacing-lg); overflow-x: auto; margin: 0; } .dn_schema-code pre { margin: 0; color: var(--dn-schema-white); font-family: 'Courier New', monospace; font-size: clamp(0.75rem, 1.5vw, 0.875rem); line-height: 1.6; } .dn_schema-code code { color: #E8F5E9; white-space: pre; } .dn_schema-checklist { padding: var(--dn-schema-spacing-lg); background: var(--dn-schema-gray-50); border-top: 1px solid var(--dn-schema-gray-200); } .dn_schema-checklist__title { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-md); } .dn_schema-checklist__list { list-style: none; padding: 0; margin: 0; } .dn_schema-checklist__list li { position: relative; padding-left: var(--dn-schema-spacing-lg); margin-bottom: var(--dn-schema-spacing-sm); color: var(--dn-schema-gray-700); line-height: 1.5; } .dn_schema-checklist__list li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-schema-blue); font-weight: bold; } .dn_schema-tools { max-width: 900px; margin: 0 auto; } .dn_schema-tools__content { background: var(--dn-schema-white); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); margin-bottom: var(--dn-schema-spacing-lg); box-shadow: var(--dn-schema-shadow-sm); } .dn_schema-tools__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-tools__list { padding-left: var(--dn-schema-spacing-lg); line-height: 2; color: var(--dn-schema-gray-700); } .dn_schema-tools__list li { margin-bottom: var(--dn-schema-spacing-md); } .dn_schema-link { color: var(--dn-schema-blue); text-decoration: none; transition: var(--dn-schema-transition); border-bottom: 1px solid transparent; } .dn_schema-link:hover { color: var(--dn-schema-primary); border-bottom-color: var(--dn-schema-primary); } .dn_schema-link:focus-visible { outline: 2px solid var(--dn-schema-blue); outline-offset: 2px; border-radius: var(--dn-schema-radius-sm); } .dn_schema-warning { background: var(--dn-schema-accent); color: var(--dn-schema-white); padding: var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); box-shadow: var(--dn-schema-shadow-md); } .dn_schema-warning__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; margin-bottom: var(--dn-schema-spacing-md); } .dn_schema-warning__list { list-style: none; padding: 0; margin: 0; } .dn_schema-warning__list li { position: relative; padding-left: var(--dn-schema-spacing-lg); margin-bottom: var(--dn-schema-spacing-sm); line-height: 1.5; } .dn_schema-warning__list li::before { content: '×'; position: absolute; left: 0; font-weight: bold; font-size: 1.25rem; } .dn_schema-warning P{ COLOR:#000; } .dn_schema-practices { max-width: 900px; margin: 0 auto; } .dn_schema-practices__card { background: var(--dn-schema-white); border: 2px solid var(--dn-schema-blue); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-xl); box-shadow: var(--dn-schema-shadow-md); } .dn_schema-practices__title { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--dn-schema-primary); margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-practices__list { list-style: none; padding: 0; margin: 0; } .dn_schema-practices__list li { position: relative; padding-left: var(--dn-schema-spacing-xl); margin-bottom: var(--dn-schema-spacing-md); line-height: 1.6; color: var(--dn-schema-gray-700); padding-bottom: var(--dn-schema-spacing-md); border-bottom: 1px solid var(--dn-schema-gray-100); } .dn_schema-practices__list li:last-child { border-bottom: none; padding-bottom: 0; } .dn_schema-practices__list li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-schema-blue); font-weight: bold; font-size: 1.25rem; } .dn_schema-practices__list strong { color: var(--dn-schema-dark); } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-schema-primary) 0%, var(--dn-schema-secondary) 100%); padding: var(--dn-schema-spacing-xxxl) 0; text-align: center; animation: dn_schema-fadeInUp 1.2s ease-out; } .dn_schema-cta__content { max-width: 800px; margin: 0 auto; } .dn_schema-cta__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-schema-blue); margin-bottom: var(--dn-schema-spacing-xxl); opacity: 0.95; } .dn_schema-cta__buttons { display: flex; gap: var(--dn-schema-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_schema-btn { display: inline-block; padding: var(--dn-schema-spacing-md) var(--dn-schema-spacing-xl); border-radius: var(--dn-schema-radius); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; text-decoration: none; transition: var(--dn-schema-transition); border: 2px solid transparent; min-width: 180px; text-align: center; } .dn_schema-btn--primary { background: var(--dn-schema-accent); color: var(--dn-schema-white); border-color: var(--dn-schema-accent); } .dn_schema-btn--primary:hover { background: var(--dn-schema-dark); border-color: var(--dn-schema-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .dn_schema-btn--primary:active { transform: translateY(0); } .dn_schema-btn--primary:focus-visible { outline: 3px solid var(--dn-schema-blue); outline-offset: 3px; } .dn_schema-btn--secondary { background: transparent; color: var(--dn-schema-white); border-color: var(--dn-schema-white); } .dn_schema-btn--secondary:hover { background: var(--dn-schema-white); color: var(--dn-schema-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,255,255,0.3); } .dn_schema-btn--secondary:active { transform: translateY(0); } .dn_schema-btn--secondary:focus-visible { outline: 3px solid var(--dn-schema-white); outline-offset: 3px; } @media (max-width: 768px) { .dn_schema-section { padding: var(--dn-schema-spacing-xxl) 0; } .dn_schema-grid { grid-template-columns: 1fr; gap: var(--dn-schema-spacing-lg); } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_schema-btn { width: 100%; max-width: 300px; } .dn_schema-code { padding: var(--dn-schema-spacing-md); } .dn_schema-tools__list { padding-left: var(--dn-schema-spacing-md); } } @media (max-width: 480px) { .dn_schema-hero { padding: var(--dn-schema-spacing-xxl) var(--dn-schema-spacing-md); } .dn_schema-card__header, .dn_schema-checklist, .dn_schema-tools__content, .dn_schema-warning, .dn_schema-practices__card { padding: var(--dn-schema-spacing-lg); } .dn_schema-hero__title { font-size: 1.75rem; } .dn_schema-section__title { font-size: 1.5rem; } } /* Base (optional) */ .dn-related-list { list-style: none; margin: 0; padding: 0; } .dn-related-item { display: flex; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #eee; } /* Highlight current post */ .dn-related-item.is-current .dn-related-title { color: #0a66c2; /* ← your brand color */ font-weight: 600; text-decoration: none; } .dn-related-item.is-current { background: #f4f9ff; /* subtle tint (optional) */ border-radius: 6px; padding: .5rem .5rem; } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-light: #f8f9fa; --dn-gray-medium: #e5e7eb; --dn-gray-dark: #6b7280; --dn-spacing-xs: 4px; --dn-spacing-sm: 8px; --dn-spacing-md: 16px; --dn-spacing-lg: 24px; --dn-spacing-xl: 32px; --dn-spacing-2xl: 48px; --dn-spacing-3xl: 64px; --dn-spacing-4xl: 96px; --dn-radius-sm: 8px; --dn-radius-md: 12px; --dn-radius-lg: 16px; --dn-radius-btn: 14px; --dn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --dn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --dn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12); --dn-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16); --dn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-wrapper { min-height: 100vh; background: var(--dn-white); } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); padding: clamp(var(--dn-spacing-3xl), 8vw, var(--dn-spacing-4xl)) 0; position: relative; overflow: hidden; animation: dn_fadeInUp 0.8s ease-out; } .dn_schema-hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-lg); line-height: 1.2; } .dn_schema-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-blue); opacity: 0.95; margin-bottom: var(--dn-spacing-2xl); line-height: 1.5; } .dn_schema-stats { background: var(--dn-white); padding: var(--dn-spacing-3xl) 0; animation: dn_fadeInUp 0.8s ease-out 0.2s both; } .dn_schema-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-spacing-xl); } .dn_schema-stat { text-align: center; padding: var(--dn-spacing-xl); background: var(--dn-gray-light); border-radius: var(--dn-radius-lg); transition: transform var(--dn-transition); } .dn_schema-stat:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_schema-stat__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-dark); margin-bottom: var(--dn-spacing-sm); text-transform: uppercase; letter-spacing: 0.05em; } .dn_schema-stat__value { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-spacing-sm); } .dn_schema-stat__value--standard { color: var(--dn-accent); } .dn_schema-stat__value--rich { color: var(--dn-blue); } .dn_schema-stat__desc { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--dn-gray-dark); } .dn_schema-content { background: var(--dn-gray-light); padding: var(--dn-spacing-3xl) 0; } .dn_schema-section { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-2xl); margin-bottom: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-sm); animation: dn_fadeInUp 0.8s ease-out 0.3s both; } .dn_schema-section__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); padding-bottom: var(--dn-spacing-md); border-bottom: 3px solid var(--dn-primary); } .dn_schema-case { margin-bottom: var(--dn-spacing-xl); } .dn_schema-case__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); } .dn_schema-case__meta { background: var(--dn-gray-light); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); margin-bottom: var(--dn-spacing-lg); } .dn_schema-case__meta p { margin: var(--dn-spacing-xs) 0; color: var(--dn-black); } .dn_schema-link { color: var(--dn-blue); text-decoration: none; transition: color var(--dn-transition); } .dn_schema-link:hover { color: var(--dn-primary); text-decoration: underline; } .dn_schema-link:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 2px; } .dn_schema-code { background: var(--dn-dark); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); overflow-x: auto; margin-bottom: var(--dn-spacing-lg); } .dn_schema-code pre { margin: 0; } .dn_schema-code code { color: var(--dn-white); font-family: 'Courier New', monospace; font-size: clamp(0.75rem, 1vw, 0.875rem); line-height: 1.6; } .dn_schema-highlight { background: linear-gradient(135deg, var(--dn-blue) 0%, var(--dn-secondary) 100%); color: var(--dn-white); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); } .dn_schema-highlight__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; margin-bottom: var(--dn-spacing-md); } .dn_schema-list { list-style: none; padding: 0; } .dn_schema-list li { padding: var(--dn-spacing-sm) 0; padding-left: var(--dn-spacing-lg); position: relative; } .dn_schema-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; } .dn_schema-card { background: var(--dn-white); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); box-shadow: var(--dn-shadow-md); } .dn_schema-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); } .dn_schema-table-wrapper { overflow-x: auto; } .dn_schema-table { width: 100%; border-collapse: collapse; background: var(--dn-white); border-radius: var(--dn-radius-md); overflow: hidden; } .dn_schema-table thead { background: var(--dn-primary); } .dn_schema-table thead th { padding: var(--dn-spacing-md); text-align: left; color: var(--dn-white); font-weight: 600; } .dn_schema-table tbody tr { border-bottom: 1px solid var(--dn-gray-medium); } .dn_schema-table tbody tr:hover { background: var(--dn-gray-light); } .dn_schema-table tbody td { padding: var(--dn-spacing-md); color: var(--dn-black); } .dn_schema-table__highlight { color: var(--dn-blue); font-weight: 700; } .dn_schema-serp-preview { margin-top: var(--dn-spacing-lg); } .dn_schema-serp-preview__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--dn-dark); margin-bottom: var(--dn-spacing-md); } .dn_schema-serp-preview__box { background: var(--dn-white); border: 1px solid var(--dn-gray-medium); border-radius: var(--dn-radius-md); padding: var(--dn-spacing-lg); } .dn_schema-serp-preview__link { color: var(--dn-blue); font-weight: 600; margin-bottom: var(--dn-spacing-xs); } .dn_schema-serp-preview__stars { color: var(--dn-accent); margin-bottom: var(--dn-spacing-xs); } .dn_schema-serp-preview__desc { color: var(--dn-gray-dark); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_schema-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-spacing-lg); } .dn_schema-comparison__card { background: var(--dn-white); border: 2px solid var(--dn-primary); border-radius: var(--dn-radius-lg); padding: var(--dn-spacing-xl); transition: transform var(--dn-transition); } .dn_schema-comparison__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-lg); } .dn_schema-comparison__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-spacing-lg); } .dn_schema-timeline { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); } .dn_schema-timeline__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--dn-dark); margin-bottom: var(--dn-spacing-xl); text-align: center; } .dn_schema-timeline__grid { display: grid; gap: var(--dn-spacing-lg); } .dn_schema-timeline__item { background: var(--dn-white); padding: var(--dn-spacing-lg); border-radius: var(--dn-radius-md); display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: var(--dn-spacing-lg); transition: transform var(--dn-transition); } .dn_schema-timeline__item:hover { transform: translateX(8px); box-shadow: var(--dn-shadow-md); } .dn_schema-timeline__period { font-weight: 600; color: var(--dn-dark); } .dn_schema-timeline__bar { height: 8px; background: var(--dn-gray-medium); border-radius: 4px; position: relative; overflow: hidden; } .dn_schema-timeline__bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--dn-blue), var(--dn-primary)); border-radius: 4px; } .dn_schema-timeline__bar--15::after { width: 15%; } .dn_schema-timeline__bar--40::after { width: 40%; } .dn_schema-timeline__bar--70::after { width: 70%; } .dn_schema-timeline__bar--95::after { width: 95%; } .dn_schema-timeline__value { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 700; color: var(--dn-blue); } .dn_schema-timeline__desc { grid-column: 2 / 4; color: var(--dn-gray-dark); font-size: clamp(0.875rem, 1vw, 1rem); } .dn_schema-methodology { background: var(--dn-gray-light); padding: var(--dn-spacing-xl); border-radius: var(--dn-radius-lg); border-left: 4px solid var(--dn-primary); } .dn_schema-methodology__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--dn-dark); margin-bottom: var(--dn-spacing-lg); } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-dark) 100%); padding: var(--dn-spacing-3xl) 0; text-align: center; animation: dn_fadeInUp 0.8s ease-out 0.4s both; } .dn_schema-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-spacing-md); } .dn_schema-cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--dn-blue); margin-bottom: var(--dn-spacing-2xl); } .dn_schema-cta__buttons { display: flex; gap: var(--dn-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_btn { display: inline-block; padding: var(--dn-spacing-md) var(--dn-spacing-xl); border-radius: var(--dn-radius-btn); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; text-decoration: none; transition: all var(--dn-transition); border: 2px solid transparent; } .dn_btn--primary { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--primary:hover { background: var(--dn-dark); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--primary:focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } .dn_btn--secondary { background: transparent; color: var(--dn-white); border-color: var(--dn-white); } .dn_btn--secondary:hover { background: var(--dn-white); color: var(--dn-primary); } .dn_btn--secondary:focus-visible { outline: 3px solid var(--dn-white); outline-offset: 2px; } @media (max-width: 768px) { .dn_schema-section { padding: var(--dn-spacing-lg); } .dn_schema-timeline__item { grid-template-columns: 1fr; text-align: center; } .dn_schema-timeline__desc { grid-column: 1; } .dn_schema-comparison { grid-template-columns: 1fr; } .dn_schema-table { font-size: 0.875rem; } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_btn { width: 100%; max-width: 300px; } } .dn_schema-stats { background: var(--dn-white); padding: var(--dn-spacing-md) 0; } .dn_schema-statsgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dn-spacing-lg); } .dn_schema-stat { text-align: center; padding: var(--dn-spacing-lg); background: var(--dn-gray-light); border-radius: var(--dn-radius-md); border-top: 4px solid transparent; transition: all var(--dn-transition); } .dn_schema-stat:first-child { border-top-color: var(--dn-accent); } .dn_schema-stat:last-child { border-top-color: var(--dn-primary); } .dn_schema-stat:hover { transform: translateY(-3px); box-shadow: var(--dn-shadow-md); background: var(--dn-white); } .dn_schema-statlabel, .dn_schema-stat__label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dn-gray-dark); font-weight: 600; margin-bottom: var(--dn-spacing-sm); } .dn_schema-statvalue, .dn_schema-stat__value { font-size: 2.5rem; font-weight: 700; line-height: 1; margin: var(--dn-spacing-sm) 0; } .dn_schema-statvalue--standard, .dn_schema-stat__value--standard { color: var(--dn-accent); } .dn_schema-statvalue--rich, .dn_schema-stat__value--rich { color: var(--dn-primary); } .dn_schema-statdesc, .dn_schema-stat__desc { font-size: 0.875rem; color: var(--dn-gray-dark); line-height: 1.3; } .dn_schema-stat p { display: none; } @media (max-width: 768px) { .dn_schema-statsgrid { grid-template-columns: 1fr; gap: var(--dn-spacing-md); } } @media (max-width: 480px) { .dn_schema-stat { padding: var(--dn-spacing-md); } .dn_schema-statvalue, .dn_schema-stat__value { font-size: 2rem; } } :root { --sch-primary: #194A9A; --sch-secondary: #2F62AD; --sch-blue: #348EDF; --sch-accent: #DF4756; --sch-dark: #011F4E; --sch-black: #000000; --sch-white: #ffffff; --sch-gray-50: #f9fafb; --sch-gray-100: #f3f4f6; --sch-gray-200: #e5e7eb; --sch-gray-600: #6b7280; --sch-gray-700: #374151; --sch-spacing-xs: 4px; --sch-spacing-sm: 8px; --sch-spacing-md: 16px; --sch-spacing-lg: 24px; --sch-spacing-xl: 32px; --sch-spacing-2xl: 48px; --sch-spacing-3xl: 64px; --sch-spacing-4xl: 96px; --sch-radius: 14px; --sch-radius-sm: 8px; --sch-radius-lg: 20px; --sch-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --sch-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --sch-shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --sch-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes schFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .sch_wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--sch-black); background: var(--sch-white); } .sch_hero { background: linear-gradient(135deg, var(--sch-dark) 0%, var(--sch-primary) 100%); padding: clamp(var(--sch-spacing-3xl), 8vw, var(--sch-spacing-4xl)) var(--sch-spacing-lg); text-align: center; position: relative; overflow: hidden; } .sch_hero::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .sch_hero__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; animation: schFadeInUp 0.8s ease-out; } .sch_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--sch-white); margin-bottom: var(--sch-spacing-lg); line-height: 1.2; } .sch_hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--sch-white); opacity: 0.95; max-width: 800px; margin: 0 auto; } .sch_stats { background: var(--sch-gray-50); padding: var(--sch-spacing-3xl) 0; animation: schFadeInUp 0.9s ease-out; } .sch_stats__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sch-spacing-lg); } .sch_stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sch-spacing-xl); } .sch_stats__card { background: var(--sch-white); padding: var(--sch-spacing-xl); border-radius: var(--sch-radius); text-align: center; box-shadow: var(--sch-shadow-sm); transition: transform var(--sch-transition), box-shadow var(--sch-transition); } .sch_stats__card:hover { transform: translateY(-4px); box-shadow: var(--sch-shadow-lg); } .sch_stats__label { font-size: clamp(0.875rem, 1.5vw, 1.125rem); color: var(--sch-gray-600); margin-bottom: var(--sch-spacing-sm); } .sch_stats__value { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; margin-bottom: var(--sch-spacing-sm); } .sch_stats__value--standard { color: var(--sch-accent); } .sch_stats__value--rich { color: var(--sch-primary); } .sch_stats__desc { color: var(--sch-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .sch_content { padding: var(--sch-spacing-3xl) 0; } .sch_content__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sch-spacing-lg); } .sch_section { margin-bottom: var(--sch-spacing-3xl); animation: schFadeInUp 1s ease-out; } .sch_section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--sch-dark); margin-bottom: var(--sch-spacing-2xl); padding-bottom: var(--sch-spacing-md); border-bottom: 3px solid var(--sch-primary); display: inline-block; } .sch_section__subtitle { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--sch-gray-700); margin-bottom: var(--sch-spacing-xl); } .sch_case { background: var(--sch-gray-50); padding: var(--sch-spacing-2xl); border-radius: var(--sch-radius); margin-bottom: var(--sch-spacing-xl); border-left: 4px solid var(--sch-primary); } .sch_case__title { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--sch-dark); margin-bottom: var(--sch-spacing-lg); } .sch_case__meta { margin-bottom: var(--sch-spacing-lg); } .sch_case__meta p { margin-bottom: var(--sch-spacing-sm); color: var(--sch-gray-700); } .sch_link { color: var(--sch-primary); text-decoration: none; transition: color var(--sch-transition); } .sch_link:hover { color: var(--sch-blue); text-decoration: underline; } .sch_link:focus-visible { outline: 2px solid var(--sch-blue); outline-offset: 2px; border-radius: 2px; } .sch_code { background: var(--sch-dark); color: #f8f8f2; padding: var(--sch-spacing-lg); border-radius: var(--sch-radius-sm); overflow-x: auto; margin: var(--sch-spacing-lg) 0; } .sch_code pre { margin: 0; font-family: 'Courier New', Courier, monospace; font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.5; } .sch_highlight { background: #e3f2fd; border-left: 4px solid var(--sch-blue); padding: var(--sch-spacing-lg); margin: var(--sch-spacing-lg) 0; border-radius: var(--sch-radius-sm); } .sch_highlight__title { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--sch-primary); margin-bottom: var(--sch-spacing-md); } .sch_highlight__list { margin-left: var(--sch-spacing-lg); color: var(--sch-gray-700); } .sch_highlight__list li { margin-bottom: var(--sch-spacing-sm); } .sch_table-wrapper { overflow-x: auto; margin: var(--sch-spacing-xl) 0; } .sch_table { width: 100%; border-collapse: collapse; background: var(--sch-white); box-shadow: var(--sch-shadow-md); border-radius: var(--sch-radius); overflow: hidden; } .sch_table thead { background: var(--sch-primary); } .sch_table th { padding: var(--sch-spacing-md); text-align: left; color: var(--sch-white); font-weight: 600; font-size: clamp(0.875rem, 1.5vw, 1rem); } .sch_table tbody tr { border-bottom: 1px solid var(--sch-gray-200); transition: background var(--sch-transition); } .sch_table tbody tr:hover { background: var(--sch-gray-50); } .sch_table tbody tr:last-child { border-bottom: none; } .sch_table td { padding: var(--sch-spacing-md); color: var(--sch-gray-700); font-size: clamp(0.875rem, 1.5vw, 1rem); } .sch_table__highlight { color: var(--sch-primary); font-weight: 700; } .sch_preview { background: var(--sch-white); border: 1px solid var(--sch-gray-200); padding: var(--sch-spacing-lg); border-radius: var(--sch-radius-sm); margin: var(--sch-spacing-lg) 0; box-shadow: var(--sch-shadow-sm); } .sch_preview__label { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--sch-gray-600); margin-bottom: var(--sch-spacing-md); } .sch_preview__link { color: var(--sch-primary); font-size: clamp(1.125rem, 1.5vw, 1.25rem); margin-bottom: var(--sch-spacing-xs); } .sch_preview__stars { color: #fbbc04; margin-bottom: var(--sch-spacing-xs); } .sch_preview__desc { color: var(--sch-gray-700); font-size: clamp(0.875rem, 1vw, 1rem); } .sch_comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sch-spacing-xl); margin: var(--sch-spacing-xl) 0; } .sch_comparison__card { background: var(--sch-gray-50); padding: var(--sch-spacing-xl); border-radius: var(--sch-radius); border-top: 4px solid var(--sch-primary); transition: transform var(--sch-transition), box-shadow var(--sch-transition); } .sch_comparison__card:hover { transform: translateY(-4px); box-shadow: var(--sch-shadow-md); } .sch_comparison__title { font-size: clamp(1.125rem, 1.5vw, 1.5rem); color: var(--sch-primary); margin-bottom: var(--sch-spacing-lg); } .sch_comparison__list { list-style: none; padding: 0; line-height: 2; color: var(--sch-gray-700); } .sch_comparison__list li { padding: var(--sch-spacing-xs) 0; } .sch_timeline { margin: var(--sch-spacing-xl) 0; } .sch_timeline__item { display: grid; grid-template-columns: 120px 1fr 100px auto; gap: var(--sch-spacing-lg); align-items: center; margin-bottom: var(--sch-spacing-lg); padding: var(--sch-spacing-md); background: var(--sch-gray-50); border-radius: var(--sch-radius-sm); transition: transform var(--sch-transition); } .sch_timeline__item:hover { transform: translateX(4px); background: var(--sch-gray-100); } .sch_timeline__period { font-weight: 700; color: var(--sch-primary); font-size: clamp(0.875rem, 1vw, 1rem); } .sch_timeline__progress { position: relative; height: 20px; background: var(--sch-gray-200); border-radius: 10px; overflow: hidden; } .sch_timeline__bar { height: 100%; background: linear-gradient(to right, var(--sch-primary), var(--sch-blue)); border-radius: 10px; transition: width var(--sch-transition); } .sch_timeline__bar--15 { width: 15%; } .sch_timeline__bar--40 { width: 40%; } .sch_timeline__bar--70 { width: 70%; } .sch_timeline__bar--95 { width: 95%; } .sch_timeline__value { font-weight: 700; color: var(--sch-primary); font-size: clamp(1rem, 1.5vw, 1.25rem); } .sch_timeline__desc { color: var(--sch-gray-600); font-size: clamp(0.875rem, 1vw, 1rem); } .sch_methodology { background: #e3f2fd; padding: var(--sch-spacing-2xl); border-radius: var(--sch-radius); margin: var(--sch-spacing-xl) 0; } .sch_methodology__title { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--sch-dark); margin-bottom: var(--sch-spacing-lg); } .sch_methodology__list { margin-left: var(--sch-spacing-lg); color: var(--sch-gray-700); line-height: 2; } .sch_methodology__list li { margin-bottom: var(--sch-spacing-sm); } .sch_cta { background: linear-gradient(135deg, var(--sch-dark) 0%, var(--sch-primary) 100%); color: var(--sch-white); padding: var(--sch-spacing-4xl) var(--sch-spacing-lg); text-align: center; position: relative; overflow: hidden; margin-top: var(--sch-spacing-3xl); } .sch_cta::before { content: ''; position: absolute; top: -50%; left: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52,142,223,0.1) 0%, transparent 70%); pointer-events: none; } .sch_cta__container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; animation: schFadeInUp 1.2s ease-out; } .sch_cta__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--sch-spacing-lg); } .sch_cta__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--sch-spacing-2xl); opacity: 0.95; } .sch_cta__buttons { display: flex; gap: var(--sch-spacing-lg); justify-content: center; flex-wrap: wrap; } .sch_btn { display: inline-block; padding: var(--sch-spacing-md) var(--sch-spacing-xl); border-radius: var(--sch-radius); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; text-decoration: none; transition: all var(--sch-transition); cursor: pointer; } .sch_btn--primary { background: var(--sch-accent); color: var(--sch-white); box-shadow: 0 4px 15px rgba(223,71,86,0.3); } .sch_btn--primary:hover { background: #c73846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,71,86,0.4); } .sch_btn--primary:focus-visible { outline: 3px solid var(--sch-blue); outline-offset: 3px; } .sch_btn--primary:active { transform: translateY(0); } .sch_btn--secondary { background: transparent; color: var(--sch-white); border: 2px solid var(--sch-white); } .sch_btn--secondary:hover { background: var(--sch-white); color: var(--sch-primary); } .sch_btn--secondary:focus-visible { outline: 3px solid var(--sch-white); outline-offset: 3px; } .sch_btn--secondary:active { transform: scale(0.98); } @media (max-width: 768px) { .sch_timeline__item { grid-template-columns: 1fr; gap: var(--sch-spacing-sm); } .sch_comparison { grid-template-columns: 1fr; } .sch_table { font-size: 0.875rem; } .sch_table th, .sch_table td { padding: var(--sch-spacing-sm); } .sch_cta__buttons { flex-direction: column; align-items: center; } .sch_btn { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .sch_hero { padding: var(--sch-spacing-2xl) var(--sch-spacing-md); } .sch_case { padding: var(--sch-spacing-lg); } .sch_stats__grid { grid-template-columns: 1fr; } } :root { --dn-schema-primary: #194A9A; --dn-schema-secondary: #2F62AD; --dn-schema-blue: #348EDF; --dn-schema-accent: #DF4756; --dn-schema-dark: #011F4E; --dn-schema-black: #000000; --dn-schema-white: #FFFFFF; --dn-schema-gray-50: #F8F9FA; --dn-schema-gray-100: #E9ECEF; --dn-schema-gray-200: #DEE2E6; --dn-schema-gray-600: #6C757D; --dn-schema-gray-700: #495057; --dn-schema-spacing-xs: 4px; --dn-schema-spacing-sm: 8px; --dn-schema-spacing-md: 16px; --dn-schema-spacing-lg: 24px; --dn-schema-spacing-xl: 32px; --dn-schema-spacing-2xl: 48px; --dn-schema-spacing-3xl: 64px; --dn-schema-spacing-4xl: 96px; --dn-schema-radius: 14px; --dn-schema-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); --dn-schema-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --dn-schema-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --dn-schema-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @keyframes dn_schema-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_schema-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--dn-schema-black); background: var(--dn-schema-white); min-height: 100vh; } .dn_schema-hero { background: linear-gradient(135deg, var(--dn-schema-dark) 0%, var(--dn-schema-primary) 100%); padding: var(--dn-schema-spacing-4xl) var(--dn-schema-spacing-lg); position: relative; overflow: hidden; animation: dn_schema-fadeInUp 0.6s ease; } .dn_schema-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(52, 142, 223, 0.15) 0%, transparent 50%); pointer-events: none; } .dn_schema-hero__content { position: relative; text-align: center; max-width: 900px; margin: 0 auto; } .dn_schema-hero__title { font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-lg); line-height: 1.2; } .dn_schema-hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--dn-schema-blue); font-weight: 500; line-height: 1.5; } .dn_schema-toc { background: var(--dn-schema-gray-50); padding: var(--dn-schema-spacing-2xl) 0; animation: dn_schema-fadeInUp 0.7s ease; } .dn_schema-section { padding: var(--dn-schema-spacing-3xl) 0; animation: dn_schema-fadeInUp 0.8s ease; } .dn_schema-section--alt { background: var(--dn-schema-gray-50); } .dn_schema-section--tools { background: linear-gradient(to bottom, var(--dn-schema-white), var(--dn-schema-gray-50)); } .dn_schema-section__title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-schema-dark); text-align: center; margin-bottom: var(--dn-schema-spacing-2xl); position: relative; padding-bottom: var(--dn-schema-spacing-md); } .dn_schema-section__title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--dn-schema-primary); border-radius: 2px; } .dn_schema-card { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); box-shadow: var(--dn-schema-shadow); overflow: hidden; transition: var(--dn-schema-transition); margin-bottom: var(--dn-schema-spacing-xl); } .dn_schema-card:hover { transform: translateY(-4px); box-shadow: var(--dn-schema-shadow-hover); } .dn_schema-card__header { padding: var(--dn-schema-spacing-lg); background: linear-gradient(135deg, var(--dn-schema-primary), var(--dn-schema-secondary)); color: var(--dn-schema-white); } .dn_schema-card__label { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; margin-bottom: var(--dn-schema-spacing-sm); } .dn_schema-card__features { font-size: clamp(0.875rem, 1.5vw, 1rem); opacity: 0.95; } .dn_schema-card__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); padding: var(--dn-schema-spacing-lg) var(--dn-schema-spacing-lg) 0; } .dn_schema-code { padding: var(--dn-schema-spacing-lg); background: var(--dn-schema-gray-50); border-left: 4px solid var(--dn-schema-primary); overflow-x: auto; } .dn_schema-code pre { margin: 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: clamp(0.75rem, 1.2vw, 0.875rem); line-height: 1.5; color: var(--dn-schema-gray-700); } .dn_schema-code code { display: block; white-space: pre; tab-size: 2; } .dn_schema-checklist { padding: var(--dn-schema-spacing-lg); background: linear-gradient(to right, #E8F5E9, #F0F7FF); border-top: 1px solid var(--dn-schema-gray-200); } .dn_schema-checklist__title { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-md); } .dn_schema-checklist__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-schema-spacing-sm); } .dn_schema-checklist__list li { position: relative; padding-left: var(--dn-schema-spacing-lg); color: var(--dn-schema-gray-700); line-height: 1.5; } .dn_schema-checklist__list li::before { content: '✓'; position: absolute; left: 0; color: #28A745; font-weight: 700; font-size: 1.125rem; } .dn_schema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-schema-spacing-xl); } .dn_schema-tools { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-xl); box-shadow: var(--dn-schema-shadow); } .dn_schema-tools__content { margin-bottom: var(--dn-schema-spacing-xl); } .dn_schema-tools__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-tools__list { list-style-type: decimal; padding-left: var(--dn-schema-spacing-lg); line-height: 1.8; } .dn_schema-tools__list li { color: var(--dn-schema-gray-700); margin-bottom: var(--dn-schema-spacing-sm); } .dn_schema-link { color: var(--dn-schema-primary); text-decoration: none; transition: var(--dn-schema-transition-fast); font-weight: 500; } .dn_schema-link:hover { color: var(--dn-schema-secondary); text-decoration: underline; } .dn_schema-link:focus-visible { outline: 2px solid var(--dn-schema-blue); outline-offset: 2px; border-radius: 2px; } .dn_schema-warning { background: #FFF5F5; border: 1px solid #FFCDD2; border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-lg); } .dn_schema-warning__title { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--dn-schema-accent); margin-bottom: var(--dn-schema-spacing-md); } .dn_schema-warning__list { list-style: none; padding: 0; } .dn_schema-warning__list li { position: relative; padding-left: var(--dn-schema-spacing-xl); color: var(--dn-schema-gray-700); line-height: 1.6; margin-bottom: var(--dn-schema-spacing-sm); } .dn_schema-warning__list li::before { content: '⚠'; position: absolute; left: 0; color: var(--dn-schema-accent); font-size: 1.125rem; } .dn_schema-practices { background: var(--dn-schema-white); border-radius: var(--dn-schema-radius); padding: var(--dn-schema-spacing-xl); box-shadow: var(--dn-schema-shadow); } .dn_schema-practices__card { padding: var(--dn-schema-spacing-lg); background: linear-gradient(135deg, #F0F7FF, var(--dn-schema-white)); border-radius: var(--dn-schema-radius); } .dn_schema-practices__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--dn-schema-dark); margin-bottom: var(--dn-schema-spacing-lg); } .dn_schema-practices__list { list-style: none; padding: 0; display: grid; gap: var(--dn-schema-spacing-md); } .dn_schema-practices__list li { position: relative; padding: var(--dn-schema-spacing-md); padding-left: var(--dn-schema-spacing-2xl); background: var(--dn-schema-white); border-radius: var(--dn-schema-spacing-sm); border-left: 3px solid var(--dn-schema-primary); color: var(--dn-schema-gray-700); line-height: 1.6; transition: var(--dn-schema-transition-fast); } .dn_schema-practices__list li::before { content: '✅'; position: absolute; left: var(--dn-schema-spacing-md); font-size: 1.125rem; } .dn_schema-practices__list li:hover { transform: translateX(4px); background: var(--dn-schema-gray-50); } .dn_schema-cta { background: linear-gradient(135deg, var(--dn-schema-dark) 0%, var(--dn-schema-primary) 100%); padding: var(--dn-schema-spacing-4xl) 0; position: relative; overflow: hidden; animation: dn_schema-fadeInUp 0.9s ease; } .dn_schema-cta::before { content: ''; position: absolute; top: -50%; right: -25%; width: 150%; height: 200%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 60%); pointer-events: none; } .dn_schema-cta__content { position: relative; text-align: center; max-width: 800px; margin: 0 auto; padding: 0 var(--dn-schema-spacing-lg); } .dn_schema-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-schema-white); margin-bottom: var(--dn-schema-spacing-md); line-height: 1.3; } .dn_schema-cta__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-schema-blue); margin-bottom: var(--dn-schema-spacing-2xl); } .dn_schema-cta__buttons { display: flex; gap: var(--dn-schema-spacing-lg); justify-content: center; flex-wrap: wrap; } .dn_schema-btn { display: inline-block; padding: var(--dn-schema-spacing-md) var(--dn-schema-spacing-xl); border-radius: 14px; font-size: clamp(0.875rem, 1.5vw, 1.125rem); font-weight: 600; text-decoration: none; transition: var(--dn-schema-transition); text-align: center; min-width: 180px; border: 2px solid transparent; } .dn_schema-btn--primary { background: var(--dn-schema-accent); color: var(--dn-schema-white); } .dn_schema-btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(223, 71, 86, 0.3); } .dn_schema-btn--primary:focus-visible { outline: 3px solid var(--dn-schema-blue); outline-offset: 3px; } .dn_schema-btn--primary:active { transform: translateY(0); } .dn_schema-btn--secondary { background: transparent; color: var(--dn-schema-white); border-color: var(--dn-schema-white); } .dn_schema-btn--secondary:hover { background: var(--dn-schema-white); color: var(--dn-schema-primary); transform: translateY(-2px); } .dn_schema-btn--secondary:focus-visible { outline: 3px solid var(--dn-schema-white); outline-offset: 3px; } .dn_schema-btn--secondary:active { transform: translateY(0); } @media (max-width: 768px) { .dn_schema-hero { padding: var(--dn-schema-spacing-3xl) var(--dn-schema-spacing-md); } .dn_schema-section { padding: var(--dn-schema-spacing-2xl) var(--dn-schema-spacing-md); } .dn_schema-grid { grid-template-columns: 1fr; } .dn_schema-checklist__list { grid-template-columns: 1fr; } .dn_schema-cta__buttons { flex-direction: column; align-items: center; } .dn_schema-btn { width: 100%; max-width: 300px; } .dn_schema-code { padding: var(--dn-schema-spacing-md); } .dn_schema-card__header { padding: var(--dn-schema-spacing-md); } } @media (max-width: 480px) { .dn_schema-hero__title { font-size: 1.5rem; } .dn_schema-hero__subtitle { font-size: 1rem; } .dn_schema-section__title { font-size: 1.375rem; } .dn_schema-code pre { font-size: 0.625rem; } } :root { --dn-lm-primary: #194A9A; --dn-lm-secondary: #2F62AD; --dn-lm-blue: #348EDF; --dn-lm-accent: #DF4756; --dn-lm-dark: #011F4E; --dn-lm-black: #000000; --dn-lm-white: #FFFFFF; --dn-lm-gray-light: #F8F9FA; --dn-lm-gray: #E9ECEF; --dn-lm-gray-dark: #6C757D; --dn-lm-spacing-xs: 4px; --dn-lm-spacing-sm: 8px; --dn-lm-spacing-md: 16px; --dn-lm-spacing-lg: 24px; --dn-lm-spacing-xl: 32px; --dn-lm-spacing-2xl: 48px; --dn-lm-spacing-3xl: 64px; --dn-lm-spacing-4xl: 96px; --dn-lm-radius: 14px; --dn-lm-radius-sm: 8px; --dn-lm-radius-lg: 20px; --dn-lm-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --dn-lm-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dn-lm-shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --dn-lm-transition: all 300ms ease; } @media (prefers-reduced-motion: no-preference) { @keyframes dn-lm-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_lm-section, .dn_lm-hero, .dn_lm-platform, .dn_lm-case, .dn_lm-faq__item { animation: dn-lm-fadeInUp 0.6s ease-out; } } .dn_lm-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dn-lm-black); background: var(--dn-lm-white); } .dn_lm-hero { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); padding: var(--dn-lm-spacing-4xl) var(--dn-lm-spacing-lg); text-align: center; color: var(--dn-lm-white); } .dn_lm-hero__container { max-width: 1000px; margin: 0 auto; } .dn_lm-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: var(--dn-lm-spacing-lg); line-height: 1.2; } .dn_lm-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); margin-bottom: var(--dn-lm-spacing-2xl); opacity: 0.95; } .dn_lm-hero__badge { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: var(--dn-lm-spacing-md); border-radius: var(--dn-lm-radius); display: inline-block; margin-bottom: var(--dn-lm-spacing-2xl); border-left: 4px solid var(--dn-lm-accent); } .dn_lm-btn { display: inline-block; padding: var(--dn-lm-spacing-md) var(--dn-lm-spacing-xl); border-radius: var(--dn-lm-radius); text-decoration: none; font-weight: 600; transition: var(--dn-lm-transition); cursor: pointer; } .dn_lm-btn--primary { background: var(--dn-lm-accent); color: var(--dn-lm-white); } .dn_lm-btn--primary:hover { background: #C73846; transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); } .dn_lm-btn--primary:focus-visible { outline: 3px solid var(--dn-lm-blue); outline-offset: 2px; } .dn_lm-btn--secondary { background: var(--dn-lm-blue); color: var(--dn-lm-white); } .dn_lm-btn--secondary:hover { background: var(--dn-lm-primary); transform: translateY(-2px); } .dn_lm-btn--large { padding: var(--dn-lm-spacing-lg) var(--dn-lm-spacing-2xl); font-size: clamp(1rem, 2vw, 1.25rem); } .dn_lm-toc-section { background: var(--dn-lm-gray-light); padding: var(--dn-lm-spacing-2xl) var(--dn-lm-spacing-lg); } .dn_lm-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-lm-spacing-lg); } .dn_lm-main { background: var(--dn-lm-white); } .dn_lm-section { padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-section--accent { background: var(--dn-lm-gray-light); } .dn_lm-section--dark { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); } .dn_lm-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-lm-dark); margin-bottom: var(--dn-lm-spacing-xl); font-weight: 700; } .dn_lm-section__title--light { color: var(--dn-lm-white); } .dn_lm-section__subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--dn-lm-gray-dark); margin-bottom: var(--dn-lm-spacing-xl); } .dn_lm-section__text { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; margin-bottom: var(--dn-lm-spacing-lg); color: var(--dn-lm-dark); } .dn_lm-section__text--light { color: var(--dn-lm-white); } .dn_lm-callout { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); border-left: 4px solid var(--dn-lm-blue); padding: var(--dn-lm-spacing-lg); border-radius: var(--dn-lm-radius); margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-highlight { background: var(--dn-lm-white); border: 2px solid var(--dn-lm-blue); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-lg); margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-lm-spacing-lg); margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-step { background: var(--dn-lm-white); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); box-shadow: var(--dn-lm-shadow-sm); transition: var(--dn-lm-transition); } .dn_lm-step:hover { transform: translateY(-4px); box-shadow: var(--dn-lm-shadow-md); } .dn_lm-step__title { color: var(--dn-lm-primary); margin-bottom: var(--dn-lm-spacing-md); font-size: 1.25rem; } .dn_lm-step__list { list-style: none; padding: 0; line-height: 1.8; } .dn_lm-step__list li { padding-left: var(--dn-lm-spacing-lg); position: relative; margin-bottom: var(--dn-lm-spacing-sm); } .dn_lm-step__list li::before { content: '•'; position: absolute; left: 0; color: var(--dn-lm-blue); } .dn_lm-warning { background: #FFF5F5; border: 2px solid var(--dn-lm-accent); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-warning__title { color: var(--dn-lm-accent); margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-warning__list { list-style: none; padding: 0; margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-warning__list li { padding-left: var(--dn-lm-spacing-lg); position: relative; margin-bottom: var(--dn-lm-spacing-sm); } .dn_lm-warning__list li::before { content: '•'; position: absolute; left: 0; color: var(--dn-lm-accent); } .dn_lm-warning__text { margin: 0; font-weight: 500; } .dn_lm-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dn-lm-spacing-xl); margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-platform { background: rgba(255,255,255,0.95); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); text-align: center; transition: var(--dn-lm-transition); border: 2px solid rgba(255,255,255,0.2); } .dn_lm-platform:hover { transform: translateY(-4px); box-shadow: var(--dn-lm-shadow-lg); background: var(--dn-lm-white); } .dn_lm-platform__icon { font-size: 3rem; margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-platform__name { font-size: 1.5rem; color: var(--dn-lm-primary); margin-bottom: var(--dn-lm-spacing-xs); font-weight: 700; } .dn_lm-platform__company { color: var(--dn-lm-gray-dark); margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-platform__stats { margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-platform__metric { display: block; font-size: 2rem; font-weight: 700; color: var(--dn-lm-blue); } .dn_lm-platform__label { display: block; color: var(--dn-lm-gray-dark); font-size: 0.875rem; } .dn_lm-platform__usage { margin-bottom: var(--dn-lm-spacing-md); line-height: 1.6; color: var(--dn-lm-dark); } .dn_lm-platform__priority { background: var(--dn-lm-gray); padding: var(--dn-lm-spacing-sm) var(--dn-lm-spacing-md); border-radius: var(--dn-lm-radius-sm); font-size: 0.875rem; } .dn_lm-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-lm-spacing-xl); margin-bottom: var(--dn-lm-spacing-2xl); } .dn_lm-case { background: var(--dn-lm-white); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-2xl); box-shadow: var(--dn-lm-shadow-md); transition: var(--dn-lm-transition); } .dn_lm-case:hover { transform: translateY(-8px); box-shadow: var(--dn-lm-shadow-lg); } .dn_lm-case__tag { background: linear-gradient(135deg, var(--dn-lm-blue) 0%, var(--dn-lm-primary) 100%); color: var(--dn-lm-white); padding: var(--dn-lm-spacing-sm) var(--dn-lm-spacing-lg); border-radius: 50px; display: inline-block; margin-bottom: var(--dn-lm-spacing-lg); font-size: 0.875rem; font-weight: 600; } .dn_lm-case__title { color: var(--dn-lm-dark); margin-bottom: var(--dn-lm-spacing-lg); font-size: 1.25rem; } .dn_lm-case__section { margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-case__list { list-style: none; padding: 0; line-height: 1.8; } .dn_lm-case__list li { padding-left: var(--dn-lm-spacing-lg); position: relative; margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-case__list li::before { content: '•'; position: absolute; left: 0; color: var(--dn-lm-gray-dark); } .dn_lm-case__list--success li::before { color: var(--dn-lm-blue); } .dn_lm-case__result { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); padding: var(--dn-lm-spacing-lg); border-radius: var(--dn-lm-radius); text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--dn-lm-blue); } .dn_lm-cta-inline { text-align: center; } .dn_lm-table-wrapper { overflow-x: auto; margin: var(--dn-lm-spacing-xl) 0; } .dn_lm-table { width: 100%; border-collapse: collapse; background: var(--dn-lm-white); box-shadow: var(--dn-lm-shadow-md); border-radius: var(--dn-lm-radius); overflow: hidden; } .dn_lm-table thead { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); } .dn_lm-table th { padding: var(--dn-lm-spacing-lg); text-align: left; color: var(--dn-lm-white); font-weight: 600; } .dn_lm-table tbody tr { border-bottom: 1px solid var(--dn-lm-gray); } .dn_lm-table tbody tr:hover { background: var(--dn-lm-gray-light); } .dn_lm-table td { padding: var(--dn-lm-spacing-lg); } .dn_lm-contact { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); color: var(--dn-lm-white); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-contact__title { font-size: clamp(1.75rem, 3vw, 2.5rem); text-align: center; margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-contact__intro { text-align: center; font-size: 1.125rem; margin-bottom: var(--dn-lm-spacing-2xl); } .dn_lm-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dn-lm-spacing-2xl); align-items: start; } .dn_lm-contact__info h3 { margin-bottom: var(--dn-lm-spacing-lg); font-size: 1.5rem; } .dn_lm-contact__details p { margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-contact__details a { color: var(--dn-lm-white); } .dn_lm-contact__details a:hover { color: var(--dn-lm-blue); } .dn_lm-contact__hours { background: rgba(255,255,255,0.1); padding: var(--dn-lm-spacing-lg); border-radius: var(--dn-lm-radius); margin: var(--dn-lm-spacing-lg) 0; } .dn_lm-contact__hours h4 { margin-bottom: var(--dn-lm-spacing-sm); } .dn_lm-contact__highlights { background: rgba(255,255,255,0.1); padding: var(--dn-lm-spacing-lg); border-radius: var(--dn-lm-radius); margin: var(--dn-lm-spacing-lg) 0; } .dn_lm-contact__highlights ul { list-style: none; padding: 0; } .dn_lm-contact__highlights li { padding-left: var(--dn-lm-spacing-lg); position: relative; margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-contact__highlights li::before { content: '✓'; position: absolute; left: 0; color: var(--dn-lm-blue); font-weight: bold; } .dn_lm-contact__map { border-radius: var(--dn-lm-radius); overflow: hidden; box-shadow: var(--dn-lm-shadow-lg); } .dn_lm-contact__map iframe { width: 100%; height: 400px; border: 0; } .dn_lm-contact__map-info { background: rgba(255,255,255,0.1); padding: var(--dn-lm-spacing-md); } .dn_lm-faq { background: var(--dn-lm-white); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-faq__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--dn-lm-dark); text-align: center; margin-bottom: var(--dn-lm-spacing-2xl); font-weight: 700; } .dn_lm-faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: var(--dn-lm-spacing-lg); margin-bottom: var(--dn-lm-spacing-2xl); } .dn_lm-faq__item { background: var(--dn-lm-gray-light); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); transition: var(--dn-lm-transition); } .dn_lm-faq__item:hover { transform: translateX(4px); box-shadow: var(--dn-lm-shadow-sm); } .dn_lm-faq__item h3 { color: var(--dn-lm-primary); font-size: 1.125rem; margin-bottom: var(--dn-lm-spacing-md); font-weight: 600; } .dn_lm-faq__item p { margin: 0; line-height: 1.7; } .dn_lm-faq__cta { text-align: center; background: var(--dn-lm-gray-light); padding: var(--dn-lm-spacing-2xl); border-radius: var(--dn-lm-radius); } .dn_lm-faq__cta h3 { color: var(--dn-lm-dark); margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-faq__cta p { margin-bottom: var(--dn-lm-spacing-lg); color: var(--dn-lm-gray-dark); } @media (max-width: 768px) { .dn_lm-hero { padding: var(--dn-lm-spacing-2xl) var(--dn-lm-spacing-md); } .dn_lm-steps { grid-template-columns: 1fr; } .dn_lm-platforms { grid-template-columns: 1fr; } .dn_lm-cases { grid-template-columns: 1fr; } .dn_lm-contact__grid { grid-template-columns: 1fr; } .dn_lm-faq__grid { grid-template-columns: 1fr; } .dn_lm-table { font-size: 0.875rem; } .dn_lm-table th, .dn_lm-table td { padding: var(--dn-lm-spacing-md); } } @media (max-width: 480px) { .dn_lm-container { padding: 0 var(--dn-lm-spacing-md); } .dn_lm-btn--large { width: 100%; text-align: center; } } :root { --dn-primary: #194A9A; --dn-secondary: #2F62AD; --dn-blue: #348EDF; --dn-accent: #DF4756; --dn-dark: #011F4E; --dn-black: #000000; --dn-white: #ffffff; --dn-gray-light: #f8f9fa; --dn-gray: #6c757d; --dn-gray-dark: #343a40; --dn-space-xs: 0.25rem; --dn-space-sm: 0.5rem; --dn-space-md: 1rem; --dn-space-lg: 1.5rem; --dn-space-xl: 2rem; --dn-space-2xl: 3rem; --dn-space-3xl: 4rem; --dn-radius: 14px; --dn-radius-sm: 8px; --dn-radius-lg: 20px; --dn-shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --dn-shadow: 0 4px 6px rgba(0,0,0,0.07); --dn-shadow-lg: 0 10px 25px rgba(0,0,0,0.1); --dn-shadow-xl: 0 20px 40px rgba(0,0,0,0.15); --dn-duration: 0.3s; --dn-duration-fast: 0.15s; --dn-duration-slow: 0.5s; } * { margin: 0; padding: 0; box-sizing: border-box; } .dn_container { max-width: 1280px; margin: 0 auto; padding: 0 var(--dn-space-lg); } @media (prefers-reduced-motion: no-preference) { .dn_hero, .dn_alert, .dn_tools, .dn_practices, .dn_comparison, .dn_results, .dn_cta { animation: dn_fadeInUp var(--dn-duration-slow) ease-out; } } @keyframes dn_fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_hero { background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); padding: var(--dn-space-3xl) 0; position: relative; overflow: hidden; } .dn_hero::before { content: ''; position: absolute; top: 0; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(52, 142, 223, 0.1) 0%, transparent 70%); pointer-events: none; } .dn_hero__inner { text-align: center; position: relative; z-index: 1; } .dn_hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-space-lg); line-height: 1.2; } .dn_hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); margin-bottom: var(--dn-space-2xl); opacity: 0.95; } .dn_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dn-space-lg); max-width: 600px; margin: 0 auto; } .dn_stats__item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--dn-space-lg); border-radius: var(--dn-radius); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform var(--dn-duration); } .dn_stats__item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_stats__number { font-size: 2rem; font-weight: 700; color: var(--dn-white); margin-bottom: var(--dn-space-sm); } .dn_stats__label { font-size: 0.875rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; } .dn_alert { background: var(--dn-accent); padding: var(--dn-space-lg) 0; } .dn_alert__box { display: flex; align-items: center; gap: var(--dn-space-lg); flex-wrap: wrap; justify-content: center; } @media (min-width: 768px) { .dn_alert__box { justify-content: space-between; } } .dn_alert__icon { font-size: 2rem; } .dn_alert__content { flex: 1; text-align: center; } @media (min-width: 768px) { .dn_alert__content { text-align: left; } } .dn_alert__title { color: var(--dn-white); font-size: 1.25rem; font-weight: 600; margin-bottom: var(--dn-space-xs); } .dn_alert__text { color: var(--dn-white); opacity: 0.95; } .dn_btn { display: inline-block; padding: var(--dn-space-sm) var(--dn-space-lg); border-radius: var(--dn-radius); font-weight: 600; text-decoration: none; transition: all var(--dn-duration); border: 2px solid transparent; cursor: pointer; text-align: center; } .dn_btn--primary { background: var(--dn-primary); color: var(--dn-white); } .dn_btn--primary:hover, .dn_btn--primary:focus-visible { background: var(--dn-secondary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--secondary { background: var(--dn-secondary); color: var(--dn-white); } .dn_btn--secondary:hover, .dn_btn--secondary:focus-visible { background: var(--dn-primary); transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--accent { background: var(--dn-accent); color: var(--dn-white); } .dn_btn--accent:hover, .dn_btn--accent:focus-visible { background: #c73845; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--blue { background: var(--dn-blue); color: var(--dn-white); } .dn_btn--blue:hover, .dn_btn--blue:focus-visible { background: #2c79c5; transform: translateY(-2px); box-shadow: var(--dn-shadow-lg); } .dn_btn--white { background: var(--dn-white); color: var(--dn-accent); border-color: var(--dn-white); } .dn_btn--white:hover, .dn_btn--white:focus-visible { background: transparent; color: var(--dn-white); border-color: var(--dn-white); } .dn_btn--large { padding: var(--dn-space-md) var(--dn-space-xl); font-size: 1.125rem; } .dn_tools { padding: var(--dn-space-3xl) 0; background: var(--dn-gray-light); } .dn_section__title { text-align: center; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--dn-dark); margin-bottom: var(--dn-space-xl); font-weight: 700; } .dn_section__subtitle { text-align: center; color: var(--dn-gray-dark); max-width: 800px; margin: 0 auto var(--dn-space-2xl); font-size: 1.125rem; } .dn_tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-space-lg); } .dn_tools__card { background: var(--dn-white); padding: var(--dn-space-xl); border-radius: var(--dn-radius); text-align: center; box-shadow: var(--dn-shadow); transition: all var(--dn-duration); } .dn_tools__card:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_tools__icon { font-size: 2.5rem; display: block; margin-bottom: var(--dn-space-md); } .dn_tools__name { font-size: 1.25rem; color: var(--dn-dark); margin-bottom: var(--dn-space-sm); font-weight: 600; } .dn_tools__desc { color: var(--dn-gray); } .dn_practices { padding: var(--dn-space-3xl) 0; background: var(--dn-white); } .dn_practices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--dn-space-xl); } @media (max-width: 767px) { .dn_practices__grid { grid-template-columns: 1fr; } } .dn_practice { background: var(--dn-white); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-lg); overflow: hidden; transition: all var(--dn-duration); } .dn_practice:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_practice--featured { grid-column: span 2; } @media (max-width: 767px) { .dn_practice--featured { grid-column: span 1; } } .dn_practice__header { background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-secondary) 100%); color: var(--dn-white); padding: var(--dn-space-lg); } .dn_practice__title { font-size: 1.5rem; margin-bottom: var(--dn-space-xs); font-weight: 700; } .dn_practice__tagline { opacity: 0.95; font-size: 0.875rem; } .dn_practice__body { padding: var(--dn-space-lg); } .dn_practice__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-space-md); margin-bottom: var(--dn-space-lg); } .dn_practice__metric { text-align: center; padding: var(--dn-space-md); background: var(--dn-gray-light); border-radius: var(--dn-radius-sm); } .dn_practice__metric-label { display: block; font-size: 0.75rem; color: var(--dn-gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--dn-space-xs); } .dn_practice__metric-value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--dn-dark); } .dn_practice__metric-value--highlight { color: var(--dn-accent); } .dn_practice__info { margin-bottom: var(--dn-space-lg); } .dn_practice__info-row { display: flex; justify-content: space-between; padding: var(--dn-space-sm) 0; border-bottom: 1px solid var(--dn-gray-light); color: var(--dn-gray-dark); } .dn_practice__info-row:last-child { border-bottom: none; } .dn_practice__info-row strong { color: var(--dn-dark); } .dn_practice__geo { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); padding: var(--dn-space-md); border-radius: var(--dn-radius-sm); margin-bottom: var(--dn-space-lg); } .dn_practice__geo-title { font-weight: 600; color: var(--dn-primary); margin-bottom: var(--dn-space-sm); } .dn_practice__geo-text { color: var(--dn-gray-dark); font-size: 0.875rem; } .dn_comparison { padding: var(--dn-space-3xl) 0; background: var(--dn-gray-light); } .dn_comparison__wrapper { overflow-x: auto; margin-bottom: var(--dn-space-xl); } .dn_comparison__table { width: 100%; border-collapse: collapse; background: var(--dn-white); border-radius: var(--dn-radius); overflow: hidden; box-shadow: var(--dn-shadow); } .dn_comparison__table th { background: var(--dn-dark); color: var(--dn-white); padding: var(--dn-space-md); text-align: left; font-weight: 600; } .dn_comparison__table td { padding: var(--dn-space-md); border-bottom: 1px solid var(--dn-gray-light); } .dn_comparison__table tr:last-child td { border-bottom: none; } .dn_comparison__row--featured { background: linear-gradient(90deg, rgba(52, 142, 223, 0.1) 0%, rgba(52, 142, 223, 0.05) 100%); } .dn_comparison__highlight { color: var(--dn-accent); position: relative; padding-right: var(--dn-space-lg); } .dn_comparison__highlight::after { content: '✨'; position: absolute; right: 0; } .dn_comparison__cta { text-align: center; } .dn_results { padding: var(--dn-space-3xl) 0; background: var(--dn-white); } .dn_results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-space-xl); } .dn_result { text-align: center; padding: var(--dn-space-xl); background: linear-gradient(135deg, var(--dn-gray-light) 0%, var(--dn-white) 100%); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow); transition: all var(--dn-duration); } .dn_result:hover { transform: translateY(-4px); box-shadow: var(--dn-shadow-xl); } .dn_result__number { font-size: 3rem; font-weight: 700; background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--dn-space-md); } .dn_result__title { font-size: 1.25rem; color: var(--dn-dark); margin-bottom: var(--dn-space-md); font-weight: 600; } .dn_result__description { color: var(--dn-gray-dark); margin-bottom: var(--dn-space-lg); line-height: 1.6; } .dn_cta { padding: var(--dn-space-3xl) 0; background: linear-gradient(135deg, var(--dn-dark) 0%, var(--dn-primary) 100%); color: var(--dn-white); text-align: center; } .dn_cta__content { max-width: 800px; margin: 0 auto; } .dn_cta__heading { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--dn-space-md); font-weight: 700; } .dn_cta__subheading { font-size: 1.25rem; margin-bottom: var(--dn-space-2xl); opacity: 0.95; } .dn_cta__actions { display: flex; gap: var(--dn-space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-space-lg); } .dn_cta__disclaimer { font-size: 0.875rem; opacity: 0.8; } @media (max-width: 640px) { .dn_container { padding: 0 var(--dn-space-md); } .dn_stats { grid-template-columns: 1fr; } .dn_practice__metrics { grid-template-columns: 1fr; } .dn_cta__actions { flex-direction: column; } .dn_btn { width: 100%; } } :focus-visible { outline: 3px solid var(--dn-blue); outline-offset: 2px; } :root { --dn-lm-primary: #194A9A; --dn-lm-secondary: #2F62AD; --dn-lm-blue: #348EDF; --dn-lm-accent: #DF4756; --dn-lm-dark: #011F4E; --dn-lm-black: #000000; --dn-lm-white: #FFFFFF; --dn-lm-gray-light: #F8F9FA; --dn-lm-gray-medium: #E9ECEF; --dn-lm-gray-dark: #495057; --dn-lm-spacing-xs: 4px; --dn-lm-spacing-sm: 8px; --dn-lm-spacing-md: 16px; --dn-lm-spacing-lg: 24px; --dn-lm-spacing-xl: 32px; --dn-lm-spacing-2xl: 48px; --dn-lm-spacing-3xl: 64px; --dn-lm-spacing-4xl: 96px; --dn-lm-radius: 14px; --dn-lm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --dn-lm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --dn-lm-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --dn-lm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: no-preference) { @keyframes dn_lm-fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dn_lm-hero, .dn_lm-alert, .dn_lm-tools, .dn_lm-practices, .dn_lm-comparison, .dn_lm-results, .dn_lm-cta { animation: dn_lm-fadeIn 0.6s ease-out; } } .dn_lm-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--dn-lm-spacing-lg); } .dn_lm-hero { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); padding: clamp(var(--dn-lm-spacing-3xl), 8vw, var(--dn-lm-spacing-4xl)) 0; color: var(--dn-lm-white); } .dn_lm-hero__inner { text-align: center; max-width: 900px; margin: 0 auto; } .dn_lm-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: var(--dn-lm-spacing-lg); line-height: 1.2; } .dn_lm-hero__subtitle { font-size: clamp(1.125rem, 2.5vw, 1.5rem); opacity: 0.95; margin-bottom: var(--dn-lm-spacing-3xl); line-height: 1.5; } .dn_lm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dn-lm-spacing-xl); } .dn_lm-stats__item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-lg); transition: var(--dn-lm-transition); } .dn_lm-stats__item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); } .dn_lm-stats__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; display: block; margin-bottom: var(--dn-lm-spacing-sm); } .dn_lm-stats__label { font-size: clamp(0.875rem, 1vw, 1rem); opacity: 0.9; } .dn_lm-alert { background: linear-gradient(135deg, var(--dn-lm-blue) 0%, var(--dn-lm-secondary) 100%); padding: var(--dn-lm-spacing-2xl) 0; } .dn_lm-alert__box { display: flex; align-items: center; gap: var(--dn-lm-spacing-lg); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-lg); flex-wrap: wrap; } .dn_lm-alert__icon { font-size: 2rem; flex-shrink: 0; } .dn_lm-alert__content { flex: 1; min-width: 200px; } .dn_lm-alert__title { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; color: var(--dn-lm-white); margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-alert__text { color: rgba(255, 255, 255, 0.9); margin: 0; } .dn_lm-btn { display: inline-block; padding: var(--dn-lm-spacing-md) var(--dn-lm-spacing-xl); border-radius: var(--dn-lm-radius); text-decoration: none; font-weight: 600; transition: var(--dn-lm-transition); cursor: pointer; text-align: center; } .dn_lm-btn--primary { background: var(--dn-lm-primary); color: var(--dn-lm-white); } .dn_lm-btn--primary:hover, .dn_lm-btn--primary:focus-visible { background: var(--dn-lm-secondary); transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); outline: 2px solid var(--dn-lm-white); outline-offset: 2px; } .dn_lm-btn--secondary { background: var(--dn-lm-secondary); color: var(--dn-lm-white); } .dn_lm-btn--secondary:hover, .dn_lm-btn--secondary:focus-visible { background: var(--dn-lm-primary); transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); outline: 2px solid var(--dn-lm-white); outline-offset: 2px; } .dn_lm-btn--accent { background: var(--dn-lm-accent); color: var(--dn-lm-white); } .dn_lm-btn--accent:hover, .dn_lm-btn--accent:focus-visible { background: #C73845; transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); outline: 2px solid var(--dn-lm-white); outline-offset: 2px; } .dn_lm-btn--blue { background: var(--dn-lm-blue); color: var(--dn-lm-white); } .dn_lm-btn--blue:hover, .dn_lm-btn--blue:focus-visible { background: var(--dn-lm-secondary); transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); outline: 2px solid var(--dn-lm-white); outline-offset: 2px; } .dn_lm-btn--white { background: var(--dn-lm-white); color: var(--dn-lm-primary); } .dn_lm-btn--white:hover, .dn_lm-btn--white:focus-visible { background: var(--dn-lm-gray-light); transform: translateY(-2px); box-shadow: var(--dn-lm-shadow-md); outline: 2px solid var(--dn-lm-primary); outline-offset: 2px; } .dn_lm-btn--large { padding: var(--dn-lm-spacing-lg) var(--dn-lm-spacing-2xl); font-size: clamp(1rem, 1.5vw, 1.125rem); } .dn_lm-tools { background: var(--dn-lm-gray-light); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--dn-lm-dark); text-align: center; margin-bottom: var(--dn-lm-spacing-2xl); } .dn_lm-section__subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--dn-lm-gray-dark); text-align: center; margin-bottom: var(--dn-lm-spacing-2xl); max-width: 800px; margin-left: auto; margin-right: auto; } .dn_lm-tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dn-lm-spacing-lg); } .dn_lm-tools__card { background: var(--dn-lm-white); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); text-align: center; box-shadow: var(--dn-lm-shadow-sm); transition: var(--dn-lm-transition); } .dn_lm-tools__card:hover { transform: translateY(-4px); box-shadow: var(--dn-lm-shadow-lg); } .dn_lm-tools__icon { font-size: 3rem; display: block; margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-tools__title { font-size: 1.125rem; font-weight: 600; color: var(--dn-lm-dark); margin-bottom: var(--dn-lm-spacing-sm); } .dn_lm-tools__text { color: var(--dn-lm-gray-dark); margin: 0; } .dn_lm-practices { background: var(--dn-lm-white); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-practices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dn-lm-spacing-xl); } .dn_lm-practice { background: var(--dn-lm-white); border-radius: var(--dn-lm-radius); box-shadow: var(--dn-lm-shadow-sm); overflow: hidden; transition: var(--dn-lm-transition); } .dn_lm-practice:hover { box-shadow: var(--dn-lm-shadow-lg); transform: translateY(-4px); } .dn_lm-practice__header { background: linear-gradient(135deg, var(--dn-lm-primary) 0%, var(--dn-lm-secondary) 100%); padding: var(--dn-lm-spacing-lg); color: var(--dn-lm-white); } .dn_lm-practice__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-practice__tagline { font-size: 0.875rem; opacity: 0.9; margin: 0; } .dn_lm-practice__body { padding: var(--dn-lm-spacing-lg); } .dn_lm-practice__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-lm-spacing-md); margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-practice__metric { text-align: center; } .dn_lm-practice__metric-label { display: block; font-size: 0.75rem; color: var(--dn-lm-gray-dark); margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-practice__metric-value { display: block; font-size: 1.125rem; font-weight: 700; color: var(--dn-lm-dark); } .dn_lm-practice__metric-value--roi { color: var(--dn-lm-blue); } .dn_lm-practice__info { background: var(--dn-lm-gray-light); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-md); margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-practice__info-row { display: flex; justify-content: space-between; padding: var(--dn-lm-spacing-xs) 0; font-size: 0.875rem; } .dn_lm-practice__info-row span { color: var(--dn-lm-gray-dark); } .dn_lm-practice__info-row strong { color: var(--dn-lm-dark); } .dn_lm-practice__geo { background: linear-gradient(135deg, #E3F2FD 0%, #F0F9FF 100%); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-md); margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-practice__geo-title { font-size: 0.875rem; font-weight: 600; color: var(--dn-lm-primary); margin-bottom: var(--dn-lm-spacing-xs); } .dn_lm-practice__geo-text { font-size: 0.875rem; color: var(--dn-lm-dark); margin: 0; } .dn_lm-comparison { background: var(--dn-lm-gray-light); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-table-wrapper { overflow-x: auto; margin-bottom: var(--dn-lm-spacing-xl); } .dn_lm-table { width: 100%; background: var(--dn-lm-white); border-collapse: collapse; border-radius: var(--dn-lm-radius); overflow: hidden; box-shadow: var(--dn-lm-shadow-sm); } .dn_lm-table thead { background: var(--dn-lm-dark); color: var(--dn-lm-white); } .dn_lm-table th { padding: var(--dn-lm-spacing-md); text-align: left; font-weight: 600; } .dn_lm-table tbody tr { border-bottom: 1px solid var(--dn-lm-gray-medium); } .dn_lm-table tbody tr:hover { background: var(--dn-lm-gray-light); } .dn_lm-table td { padding: var(--dn-lm-spacing-md); color: var(--dn-lm-dark); } .dn_lm-table__row--featured { background: #E8F4FD; } .dn_lm-table__highlight { color: var(--dn-lm-blue); font-weight: 700; } .dn_lm-comparison__cta { text-align: center; } .dn_lm-results { background: var(--dn-lm-white); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dn-lm-spacing-xl); } .dn_lm-result { background: linear-gradient(135deg, var(--dn-lm-gray-light) 0%, var(--dn-lm-white) 100%); border-radius: var(--dn-lm-radius); padding: var(--dn-lm-spacing-xl); text-align: center; box-shadow: var(--dn-lm-shadow-sm); transition: var(--dn-lm-transition); } .dn_lm-result:hover { transform: translateY(-4px); box-shadow: var(--dn-lm-shadow-lg); } .dn_lm-result__number { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; color: var(--dn-lm-accent); margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-result__title { font-size: 1.25rem; font-weight: 600; color: var(--dn-lm-dark); margin-bottom: var(--dn-lm-spacing-md); } .dn_lm-result__description { color: var(--dn-lm-gray-dark); margin-bottom: var(--dn-lm-spacing-lg); line-height: 1.6; } .dn_lm-cta { background: linear-gradient(135deg, var(--dn-lm-dark) 0%, var(--dn-lm-primary) 100%); padding: var(--dn-lm-spacing-3xl) 0; } .dn_lm-cta__content { text-align: center; max-width: 800px; margin: 0 auto; } .dn_lm-cta__heading { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--dn-lm-white); margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-cta__subheading { font-size: clamp(1.125rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--dn-lm-spacing-2xl); } .dn_lm-cta__actions { display: flex; gap: var(--dn-lm-spacing-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dn-lm-spacing-lg); } .dn_lm-cta__disclaimer { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); margin: 0; } @media (max-width: 768px) { .dn_lm-alert__box { flex-direction: column; text-align: center; } .dn_lm-practices__grid, .dn_lm-tools__grid, .dn_lm-results__grid { grid-template-columns: 1fr; } .dn_lm-practice__metrics { grid-template-columns: 1fr; gap: var(--dn-lm-spacing-sm); } .dn_lm-cta__actions { flex-direction: column; align-items: center; } .dn_lm-btn { width: 100%; max-width: 300px; } .dn_lm-table { font-size: 0.875rem; } .dn_lm-table th, .dn_lm-table td { padding: var(--dn-lm-spacing-sm); } } @media (max-width: 480px) { .dn_lm-container { padding: 0 var(--dn-lm-spacing-md); } .dn_lm-hero { padding: var(--dn-lm-spacing-2xl) 0; } .dn_lm-stats { grid-template-columns: 1fr; } } .dn_lm-stats2 { display: grid ; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--dn-lm-spacing-xl); } }