:root { --ink: #0b0d12; --muted: #6d7480; --surface: #f4f5f7; --line: #dfe2e8; --blue: #1f74ff; --red: #f50046; --yellow: #ffc400; --radius: 24px; --shadow: 0 24px 70px rgba(12, 16, 28, .10); --page-bg: #fff; --card-bg: #fff; --text: #0b0d12; --field-bg: #fff; --fx-blue-rgb: 31, 116, 255; --fx-red-rgb: 245, 0, 70; --fx-light: rgba(255, 255, 255, .72); --fx-glow: 0 14px 38px rgba(var(--fx-blue-rgb), .18); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; color: var(--text); background: var(--page-bg); font-family: "Manrope", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; transition:background-color .3s ease,color .3s ease,opacity .17s ease,transform .17s ease; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } .site-noise { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); } .site-header { position: sticky !important; top: 0; z-index: 1030; background: rgba(255, 255, 255, .88); border-bottom: 1px solid rgba(11, 13, 18, .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease; } .site-header.is-scrolled { box-shadow:0 14px 38px rgba(9,13,24,.1); } .site-header .navbar > .container { transition:padding-top .3s ease,padding-bottom .3s ease; } .site-header.is-scrolled .navbar > .container { padding-top:.35rem!important; padding-bottom:.35rem!important; } .site-header::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 8%, rgba(var(--fx-blue-rgb), .48) 50%, transparent 92%); opacity: .48; } .utility-bar { color:rgba(255,255,255,.72); background:var(--ink); font-size:.72rem; font-weight:700; } .utility-bar .container { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .utility-bar span, .utility-bar a { display:inline-flex; align-items:center; gap:7px; } .utility-bar .container > div { display:flex; align-items:center; gap:22px; } .utility-bar a:hover { color:#fff; } .brand-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 1.05rem; font-weight: 800; letter-spacing: -.045em; } .brand-mark span:not(.brand-dot) { font-weight: 500; } .brand-dot { width: 10px; height: 10px; background: var(--red); border-radius: 50%; } .brand-mark img { display:block; width:auto; max-width:225px; height:56px; object-fit:contain; } .brand-logo-on-dark{display:none!important}html[data-theme="dark"] .site-header .brand-logo-on-light{display:none!important}html[data-theme="dark"] .site-header .brand-logo-on-dark{display:block!important}.footer-brand-mark img{max-width:225px;height:56px} .nav-link { color: var(--text); opacity:.78; font-size: .92rem; font-weight: 600; background-image:linear-gradient(var(--blue),var(--blue)); background-position:50% 100%; background-repeat:no-repeat; background-size:0 1px; transition:color .24s ease,opacity .24s ease,background-size .32s cubic-bezier(.2,.75,.2,1); } .nav-link:hover,.nav-link:focus-visible { color: var(--blue); opacity:1; background-size:calc(100% - 16px) 1px; } .nav-mobile-order-icon,.nav-mobile-order-copy small,.nav-mobile-order-arrow { display:none; } .nav-mobile-order-copy strong { font:inherit; } .language-switch,.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color:var(--text); background:var(--card-bg); font-size: .78rem; font-weight: 800; transition:color .25s ease,background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1); } .theme-toggle:hover { color:#fff; border-color:var(--blue); background:var(--blue); } .theme-toggle:hover { transform:rotate(12deg) scale(1.06); } .btn { position:relative; isolation:isolate; overflow:hidden; font-weight:700; transition:color .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.75,.2,1); } .btn::before { content:""; position:absolute; z-index:1; top:-45%; left:-70%; width:42%; height:190%; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-18deg); transition:left .62s cubic-bezier(.2,.72,.2,1); } .btn:hover::before,.btn:focus-visible::before { left:128%; } .btn:hover,.btn:focus-visible { transform:translateY(-2px); box-shadow:var(--fx-glow); } .btn:focus-visible,.hero-prev:focus-visible,.hero-next:focus-visible,.language-switch:focus-visible,.theme-toggle:focus-visible { outline:3px solid rgba(var(--fx-blue-rgb),.24); outline-offset:3px; } .btn-dark { background: var(--ink); border-color: var(--ink); } .btn-dark:hover { background: var(--blue); border-color: var(--blue); } .hero-section { padding: 24px 0 0; } .home-showcase { display:grid; grid-template-columns:minmax(0,3fr) minmax(250px,1fr); gap:20px; } .home-showcase > * { min-width:0; } .hero-swiper { position:relative; isolation:isolate; width:100%; min-width:0; max-width:100%; border-radius: 32px; overflow: hidden; background: #080b10; box-shadow: 0 32px 90px rgba(8,11,16,.2); } .hero-swiper::before { content:""; position:absolute; z-index:4; inset:0; border:1px solid rgba(255,255,255,.13); border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 55px rgba(var(--fx-blue-rgb),.06); } .hero-swiper::after { content:""; position:absolute; z-index:6; right:0; bottom:0; left:0; height:2px; pointer-events:none; background:linear-gradient(90deg,rgba(var(--fx-blue-rgb),.12),rgba(255,255,255,.9),rgba(var(--fx-blue-rgb),.72)); box-shadow:0 0 14px rgba(var(--fx-blue-rgb),.7); transform:scaleX(0); transform-origin:left center; } .hero-swiper.is-autoplaying::after { animation:eckSliderProgress 6.5s linear both; } .hero-slide { min-height: 600px; position: relative; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #080b10; padding: clamp(38px, 5vw, 70px); } .hero-slide::after { content:""; position:absolute; z-index:1; top:-48%; left:-36%; width:78%; height:190%; pointer-events:none; background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.12) 49%,transparent 62%); opacity:0; transform:translateX(-35%) rotate(3deg); } .swiper-slide-active.hero-slide::after { animation:eckHeroLight 1.15s .2s cubic-bezier(.2,.72,.2,1) both; } .hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; } .swiper-slide-active .hero-slide-image { transform: scale(1.035); } .hero-slide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,12,.88) 0%, rgba(4,7,12,.48) 52%, rgba(4,7,12,.12) 100%), linear-gradient(0deg, rgba(4,7,12,.8) 0%, transparent 60%); } .hero-slide-fallback { background: radial-gradient(circle at 76% 28%, rgba(31,116,255,.55), transparent 28%), radial-gradient(circle at 64% 80%, rgba(239,0,69,.28), transparent 32%), #080b10; } .hero-accent-red.hero-slide-fallback { background: radial-gradient(circle at 75% 30%, rgba(239,0,69,.56), transparent 30%), radial-gradient(circle at 60% 75%, rgba(255,194,0,.18), transparent 30%), #080b10; } .hero-accent-yellow.hero-slide-fallback { background: radial-gradient(circle at 75% 30%, rgba(255,194,0,.45), transparent 30%), radial-gradient(circle at 60% 75%, rgba(31,116,255,.24), transparent 30%), #080b10; } .hero-content { position: relative; z-index: 2; max-width: 790px; padding-bottom: 28px; } .swiper-slide-active .hero-content > * { animation:eckHeroCopyIn .72s cubic-bezier(.2,.75,.2,1) both; } .swiper-slide-active .hero-content > :nth-child(2) { animation-delay:.08s; } .swiper-slide-active .hero-content > :nth-child(3) { animation-delay:.16s; } .swiper-slide-active .hero-content > :nth-child(4) { animation-delay:.24s; } .eyebrow { display: inline-block; margin-bottom: 20px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; } .hero-content h1 { max-width: 760px; margin: 0; font-size: clamp(3rem, 5.2vw, 5.5rem); font-weight: 800; line-height: .95; letter-spacing: -.07em; } .hero-content p { max-width: 610px; margin: 20px 0 24px; color: rgba(255,255,255,.72); font-size: clamp(.98rem, 1.25vw, 1.12rem); line-height: 1.55; } .hero-project-link { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: .86rem; font-weight: 800; background-image:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)); background-position:0 calc(100% - 2px); background-repeat:no-repeat; background-size:0 1px; transition:background-size .35s ease; } .hero-project-link:hover,.hero-project-link:focus-visible { background-size:calc(100% - 50px) 1px; } .hero-project-link i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #080b10; background: #fff; transition:transform .32s cubic-bezier(.2,.75,.2,1),box-shadow .32s ease; } .hero-project-link:hover i,.hero-project-link:focus-visible i { transform:translate(2px,-2px); box-shadow:0 0 0 5px rgba(255,255,255,.12),0 8px 24px rgba(var(--fx-blue-rgb),.3); } .showcase-stack { display:grid; grid-template-rows:1fr 1fr; gap:20px; } .showcase-card, .service-showcase-grid a { position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; background:var(--ink); } .showcase-card { min-height:0; padding:26px; border-radius:26px; } .showcase-card::after, .service-showcase-grid a::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,7,12,.92),rgba(4,7,12,.08) 78%); } .showcase-card.showcase-artwork-only::after, .service-showcase-grid a.showcase-artwork-only::after { background:linear-gradient(135deg,rgba(4,7,12,.04),rgba(4,7,12,.2)); } .showcase-card img, .service-showcase-grid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .showcase-card:first-child img { object-position:center; } .showcase-card:hover img, .service-showcase-grid a:hover img { transform:scale(1.045); } .showcase-card span, .showcase-card strong, .showcase-card i, .service-showcase-grid span, .service-showcase-grid strong, .service-showcase-grid i { position:relative; z-index:2; } .showcase-card span, .service-showcase-grid span { margin-bottom:7px; color:rgba(255,255,255,.62); font-size:.66rem; font-weight:800; letter-spacing:.14em; } .showcase-card strong { max-width:220px; font-size:1.16rem; line-height:1.2; } .showcase-card i, .service-showcase-grid i { position:absolute; z-index:3; top:22px; right:22px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--ink); background:#fff; } .showcase-artwork-only i { box-shadow:0 10px 28px rgba(0,0,0,.28); } .service-showcase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; } .service-showcase-grid a { min-height:220px; padding:26px; border-radius:26px; } .service-showcase-grid strong { max-width:320px; font-size:1.35rem; } .service-showcase-grid a:first-child img, .service-showcase-grid a:nth-child(2) img, .service-showcase-grid a:nth-child(3) img { object-position:center; } .hero-controls { position: absolute; z-index: 5; left: clamp(42px, 6vw, 90px); right: clamp(42px, 6vw, 90px); bottom: 28px; display: flex; align-items: center; justify-content: space-between; } .hero-controls .swiper-pagination { position: static; width: auto; } .hero-controls .swiper-pagination-bullet { width: 28px; height: 3px; border-radius: 4px; background: #fff; transition:opacity .25s ease,box-shadow .3s ease,transform .3s ease; } .hero-controls .swiper-pagination-bullet-active { box-shadow:0 0 12px rgba(255,255,255,.75); transform:scaleX(1.12); } .hero-prev, .hero-next { position:relative; display: grid; place-items: center; overflow:hidden; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .28s ease; } .hero-prev:hover,.hero-next:hover,.hero-prev:focus-visible,.hero-next:focus-visible { border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.18); box-shadow:0 0 24px rgba(var(--fx-blue-rgb),.3); transform:scale(1.05); } .section-space { padding: 110px 0; } .m2-specialist-intro { padding:72px 0 10px; } .m2-intro-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:clamp(40px,7vw,110px); align-items:end; padding:0 0 62px; border-bottom:1px solid var(--line); } .m2-intro-grid h2 { max-width:760px; margin:0; font-size:clamp(2.4rem,4.6vw,5rem); font-weight:800; line-height:.98; letter-spacing:-.07em; } .m2-intro-copy p { margin:0 0 24px; color:var(--muted); font-size:1.02rem; line-height:1.75; } .m2-service-tags { display:flex; flex-wrap:wrap; gap:8px; } .m2-service-tags span { padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:var(--card-bg); font-size:.7rem; font-weight:800; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; } .section-heading h2, .page-hero h1 { max-width: 850px; margin: 0; font-size: clamp(2.4rem, 5vw, 4.9rem); font-weight: 800; line-height: 1; letter-spacing: -.065em; } .text-primary { color: var(--blue) !important; } .text-link { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 700; } .text-link:hover { color: var(--blue); } .product-card { display: flex; flex-direction: column; min-height: 470px; padding: 14px 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--card-bg); background-image:linear-gradient(145deg,rgba(var(--fx-blue-rgb),.04),transparent 38%); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .product-card:hover { transform: translateY(-7px); border-color: transparent; box-shadow: var(--shadow); } .product-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 38px; border-radius: 18px; color: #fff; background:linear-gradient(145deg,#172943,var(--ink)); box-shadow:0 12px 28px rgba(var(--fx-blue-rgb),.14); font-size: 1.4rem; transition:transform .3s ease,box-shadow .3s ease; } .product-card:hover .product-icon { transform:rotate(-4deg) scale(1.05); box-shadow:0 16px 34px rgba(var(--fx-blue-rgb),.22); } .product-card-visual { position:relative; height:210px; margin:0 -10px 24px; overflow:hidden; border-radius:20px; background:var(--ink); } .product-card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,8,13,.45),transparent 65%); } .product-card-visual img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .product-card:hover .product-card-visual img { transform:scale(1.04); } .product-card-visual > .product-card-visual-icon { position:absolute; z-index:3; left:16px; bottom:16px; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; background:rgba(5,8,13,.78); backdrop-filter:blur(10px); } .product-card-visual.is-empty { border:1px solid rgba(126,143,168,.18); background:radial-gradient(circle at 18% 18%,rgba(var(--fx-blue-rgb),.13),transparent 34%),linear-gradient(145deg,#111722,#080b11); } .product-card-visual.is-empty::before { position:absolute; top:50%; left:50%; width:148px; height:148px; border:1px solid rgba(255,255,255,.055); border-radius:50%; content:""; transform:translate(-50%,-50%); box-shadow:0 0 0 34px rgba(255,255,255,.018),0 0 0 68px rgba(255,255,255,.01); } .product-card-visual.is-empty::after { background:linear-gradient(0deg,rgba(5,8,13,.42),transparent 72%); } .product-card-empty { position:absolute; z-index:2; top:50%; left:50%; display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.1); border-radius:18px; color:rgba(255,255,255,.3); background:rgba(255,255,255,.035); font-size:1.2rem; transform:translate(-50%,-50%); } .product-category { margin-bottom: 12px; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .15em; } .product-card h3 { margin-bottom: 14px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.04em; } .product-card p { color: var(--muted); line-height: 1.7; } .product-meta { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); } .product-meta div { display: flex; flex-direction: column; gap: 3px; } .product-meta small { color: var(--muted); } .product-meta strong { font-size: 1.2rem; } .product-meta a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); transition: .2s; } .product-card:hover .product-meta a { color: #fff; background: var(--blue); } .order-cta-section{position:relative;padding-top:0;background:var(--page-bg)} .order-cta-panel{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(370px,.7fr);gap:clamp(38px,6vw,78px);align-items:center;overflow:hidden;padding:clamp(38px,6vw,76px);border:1px solid rgba(var(--fx-blue-rgb),.18);border-radius:34px;background:radial-gradient(circle at 10% 0,rgba(var(--fx-blue-rgb),.13),transparent 35%),linear-gradient(145deg,#f9fbff,#edf3fc);box-shadow:0 28px 80px rgba(13,32,68,.1)} .order-cta-panel::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:42%;height:4px;background:linear-gradient(90deg,transparent,var(--blue),var(--red))}.order-cta-orbit{position:absolute;z-index:-1;right:-150px;bottom:-240px;width:520px;aspect-ratio:1;border:1px solid rgba(var(--fx-blue-rgb),.15);border-radius:50%;box-shadow:0 0 0 80px rgba(var(--fx-blue-rgb),.035),0 0 0 160px rgba(var(--fx-red-rgb),.018)} .order-cta-copy h2{max-width:830px;margin:16px 0 22px;font-size:clamp(2.5rem,5vw,5.2rem);font-weight:820;line-height:.96;letter-spacing:-.072em}.order-cta-copy>p{max-width:720px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.8}.order-cta-features{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.order-cta-features span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(var(--fx-blue-rgb),.16);border-radius:999px;color:var(--text);background:rgba(255,255,255,.68);font-size:.66rem;font-weight:800}.order-cta-features i{color:var(--blue)} .order-cta-action{position:relative;display:flex;justify-self:end;width:100%;max-width:420px;min-height:390px;flex-direction:column;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:26px;color:#fff;background:radial-gradient(circle at 86% 8%,rgba(var(--fx-blue-rgb),.4),transparent 30%),linear-gradient(145deg,#14223a,#080b11 68%);box-shadow:0 28px 70px rgba(7,12,22,.25)}.order-cta-action-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:19px;border:1px solid rgba(255,255,255,.13);border-radius:15px;color:#89b2ff;background:rgba(255,255,255,.06);font-size:1.12rem}.order-cta-action>span{display:block;color:#7eabff;font-size:.6rem;font-weight:900;letter-spacing:.14em}.order-cta-action>strong{display:block;max-width:360px;margin:9px 0 13px;font-size:clamp(1.72rem,2vw,2.15rem);line-height:1.04;letter-spacing:-.045em}.order-cta-action>small{display:block;max-width:350px;color:rgba(255,255,255,.62);font-size:.73rem;line-height:1.62}.order-cta-actions{display:grid;gap:11px;margin-top:auto;padding-top:25px}.order-cta-actions .btn{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px;padding:11px 13px 11px 18px;font-size:.76rem}.order-cta-actions .btn i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);font-size:.72rem}.order-cta-actions>a:last-child{display:inline-flex;align-items:center;gap:8px;width:max-content;padding-left:2px;color:rgba(255,255,255,.7);font-size:.68rem;font-weight:800}.order-cta-actions>a:last-child i{font-size:.72rem;transition:transform .2s ease}.order-cta-actions>a:last-child:hover{color:#fff}.order-cta-actions>a:last-child:hover i{transform:translate(2px,-2px)} html[data-theme="dark"] .order-cta-section{background:#0d1219}html[data-theme="dark"] .order-cta-panel{border-color:rgba(255,255,255,.1);background:radial-gradient(circle at 10% 0,rgba(var(--fx-blue-rgb),.18),transparent 34%),linear-gradient(145deg,#131a24,#0a0e14);box-shadow:0 34px 90px rgba(0,0,0,.3)}html[data-theme="dark"] .order-cta-features span{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.045)} .post-card { display: flex; flex-direction: column; } .post-visual { display: flex; align-items: start; justify-content: space-between; height: 230px; margin-bottom: 24px; padding: 24px; border-radius: var(--radius); background: linear-gradient(135deg, var(--ink), #263657); color: #fff; } .post-card:nth-child(2n) .post-visual { background: linear-gradient(135deg, #ffdb54, var(--yellow)); color: var(--ink); } .post-visual span { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .post-card time { color: var(--muted); font-size: .8rem; } .post-card h3 { margin: 14px 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.035em; } .post-card p { color: var(--muted); line-height: 1.65; } .post-card > a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; } .server-references-section { padding:clamp(72px,9vw,130px) 0; color:#fff; background:#0b0e14; } .references-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.48fr); column-gap:clamp(40px,8vw,120px); align-items:end; margin-bottom:48px; } .references-heading .eyebrow { grid-column:1 / -1; margin-bottom:18px; } .references-heading h2 { max-width:820px; margin:0; font-size:clamp(2.5rem,5vw,5rem); font-weight:800; line-height:.98; letter-spacing:-.07em; } .references-heading p { margin:0 0 6px; color:rgba(255,255,255,.58); line-height:1.7; } .server-logo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .server-logo-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; padding:28px; border:1px solid rgba(255,255,255,.1); border-radius:22px; color:#fff; background:rgba(255,255,255,.035); transition:transform .2s ease,border-color .2s ease,background .2s ease; } a.server-logo-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.07); } .server-logo-card img { width:100%; height:96px; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(0,0,0,.24)); } .server-logo-card span { margin-top:20px; color:rgba(255,255,255,.55); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .references-empty { padding:42px; border:1px dashed rgba(255,255,255,.18); border-radius:22px; color:rgba(255,255,255,.48); text-align:center; } .reference-current-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:50px}.reference-current-card{min-width:0}.reference-current-card>a{display:block;height:100%;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:28px;color:#fff;background:rgba(255,255,255,.035);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.reference-current-card>a:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25);box-shadow:0 28px 70px rgba(0,0,0,.28)}.reference-current-visual{position:relative;display:grid;place-items:center;min-height:340px;overflow:hidden;background:radial-gradient(circle at 70% 25%,rgba(70,135,255,.42),transparent 35%),linear-gradient(135deg,#101a30,#082c78)}.reference-current-accent-2 .reference-current-visual{background:radial-gradient(circle at 25% 20%,rgba(255,95,130,.35),transparent 36%),linear-gradient(135deg,#2a0a17,#97002d)}.reference-current-accent-3 .reference-current-visual{background:radial-gradient(circle at 70% 20%,rgba(255,210,81,.35),transparent 35%),linear-gradient(135deg,#221a08,#765508)}.reference-current-accent-4 .reference-current-visual{background:radial-gradient(circle at 30% 20%,rgba(68,222,171,.32),transparent 35%),linear-gradient(135deg,#071d1b,#075e51)}.reference-current-visual::before,.reference-current-visual::after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.17);border-radius:50%}.reference-current-visual::before{right:-25px;top:-80px}.reference-current-visual::after{left:15%;bottom:-180px}.reference-current-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.reference-current-visual:has(.reference-current-cover)::after{inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(0deg,rgba(5,8,13,.48),transparent 62%)}.reference-current-logo{position:relative;z-index:2;width:min(58%,360px);height:160px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.38))}.reference-current-arrow{position:absolute;z-index:4;top:24px;right:24px;display:grid;place-items:center;width:50px;height:50px;border:1px solid rgba(255,255,255,.8);border-radius:50%;font-size:1.15rem;backdrop-filter:blur(8px)}.reference-current-copy{padding:25px 27px 29px}.reference-current-copy>span{color:#6fa8ff;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.reference-current-copy h3{margin:9px 0 8px;font-size:1.55rem;font-weight:800;letter-spacing:-.045em}.reference-current-copy p{display:-webkit-box;overflow:hidden;margin:0;color:rgba(255,255,255,.52);font-size:.88rem;line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical} .reference-featured-projects{margin-bottom:46px}.reference-slider-shell{position:relative;overflow:hidden}.reference-swiper{overflow:visible}.reference-swiper .swiper-slide{height:auto}.reference-swiper .server-logo-card{height:100%}.reference-slider-actions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px}.reference-slider-actions>div{display:flex;gap:8px}.reference-slider-actions button{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;background:rgba(255,255,255,.04);transition:.25s}.reference-slider-actions button:hover{border-color:#fff;background:#fff;color:#0b0e14}.reference-slider-actions>a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:750}.reference-archive{color:#fff;background:#0b0e14}.reference-about{background:var(--surface)}.reference-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);gap:clamp(40px,9vw,130px);align-items:start}.reference-about-grid h2{max-width:780px;margin:15px 0 0;font-size:clamp(2.4rem,5vw,5.2rem);font-weight:800;line-height:.98;letter-spacing:-.07em}.reference-about-grid p{color:var(--muted);font-size:1.08rem;line-height:1.85}.reference-about-grid .text-link{display:inline-flex;gap:10px;margin-top:18px} .portfolio-preview-section { background: var(--surface); } .portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } .portfolio-card { grid-column: span 6; } .portfolio-card:nth-child(3n) { grid-column: span 12; } .portfolio-card > a { display: block; height: 100%; overflow: hidden; border-radius: 28px; color: #fff; background: var(--ink); transition: transform .25s ease, box-shadow .25s ease; } .portfolio-card > a:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .portfolio-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; overflow: hidden; background: linear-gradient(135deg, #222936, #11141b); } .portfolio-art::before, .portfolio-art::after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; } .portfolio-art::before { transform: translate(-35%, 28%); } .portfolio-art::after { transform: translate(38%, -25%); } .portfolio-accent-blue .portfolio-art { background: linear-gradient(135deg, #08235c, var(--blue)); } .portfolio-accent-red .portfolio-art { background: linear-gradient(135deg, #3f0013, var(--red)); } .portfolio-accent-yellow .portfolio-art { color: var(--ink); background: linear-gradient(135deg, #ffdb54, var(--yellow)); } .portfolio-art > span:not(.brand-watermark) { position: relative; z-index: 2; font-size: clamp(6rem, 14vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: -.12em; } .portfolio-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .portfolio-art i { position: absolute; z-index: 2; top: 26px; right: 26px; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid currentColor; border-radius: 50%; font-size: 1.2rem; } .portfolio-copy { padding: 28px; } .portfolio-copy > span { color: rgba(255,255,255,.56); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .portfolio-copy h3 { margin: 10px 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.05em; } .portfolio-copy p { margin: 0; color: rgba(255,255,255,.6); line-height: 1.65; } .process-section{position:relative;background:linear-gradient(180deg,var(--page-bg),var(--surface))}.process-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.52fr);gap:clamp(40px,8vw,120px);align-items:end;margin-bottom:44px}.process-heading h2{max-width:900px;margin:16px 0 0;font-size:clamp(2.55rem,5vw,5.25rem);font-weight:820;line-height:.96;letter-spacing:-.072em}.process-heading>p{max-width:560px;margin:0 0 6px;color:var(--muted);font-size:1.02rem;line-height:1.8} .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.process-grid article{position:relative;overflow:hidden;min-height:330px;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--card-bg);box-shadow:0 16px 46px rgba(12,25,51,.055);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.process-grid article::after{content:"";position:absolute;right:-60px;bottom:-90px;width:190px;aspect-ratio:1;border:1px solid rgba(var(--fx-blue-rgb),.12);border-radius:50%;box-shadow:0 0 0 32px rgba(var(--fx-blue-rgb),.025)}.process-grid article:hover{transform:translateY(-6px);border-color:rgba(var(--fx-blue-rgb),.3);box-shadow:0 24px 65px rgba(12,32,70,.1)}.process-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.process-card-top>span{color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.13em}.process-icon{display:grid;place-items:center;width:50px;height:50px;border:1px solid rgba(var(--fx-blue-rgb),.13);border-radius:16px;color:var(--blue);background:rgba(var(--fx-blue-rgb),.08);font-size:1.15rem}.process-grid article:nth-child(2) .process-icon{color:#dd174f;background:rgba(var(--fx-red-rgb),.075);border-color:rgba(var(--fx-red-rgb),.13)}.process-grid article:nth-child(3) .process-icon{color:#0c9d6d;background:rgba(12,157,109,.08);border-color:rgba(12,157,109,.14)}.process-grid article:nth-child(4) .process-icon{color:#ae7900;background:rgba(224,164,21,.1);border-color:rgba(224,164,21,.16)}.process-grid h3{position:relative;z-index:1;margin:58px 0 13px;font-size:1.38rem;font-weight:800;line-height:1.14;letter-spacing:-.035em}.process-grid p{position:relative;z-index:1;margin:0;color:var(--muted);font-size:.86rem;line-height:1.72}html[data-theme="dark"] .process-section{background:linear-gradient(180deg,#0d1219,#10161f)}html[data-theme="dark"] .process-grid article{border-color:rgba(255,255,255,.09);background:#111821;box-shadow:none} .ready-packages-section { background:var(--surface); } .ready-package-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:20px; } .ready-package-grid article { position:relative; display:flex; flex-direction:column; padding:32px; border:1px solid var(--line); border-radius:26px; background:var(--card-bg); } .ready-package-grid article.featured { color:#fff; border-color:var(--ink); background:var(--ink); box-shadow:0 26px 70px rgba(9,12,18,.16); } .ready-package-grid article > span { color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.16em; } .ready-package-grid h3 { margin:13px 0 8px; font-size:1.55rem; font-weight:800; letter-spacing:-.05em; } .ready-package-grid article > strong { font-size:2.55rem; letter-spacing:-.07em; } .ready-package-grid ul { display:grid; gap:11px; margin:26px 0 30px; padding:22px 0 0; border-top:1px solid var(--line); list-style:none; color:var(--muted); font-size:.85rem; } .ready-package-grid li::before { content:"✓"; margin-right:9px; color:var(--blue); font-weight:900; } .ready-package-grid article.featured ul { color:rgba(255,255,255,.65); border-color:rgba(255,255,255,.14); } .ready-package-grid article > a { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding:14px 18px; border-radius:14px; color:#fff; background:var(--ink); font-size:.82rem; font-weight:800; } .ready-package-grid article.featured > a { color:var(--ink); background:#fff; } .package-badge { position:absolute; top:20px; right:20px; padding:7px 10px; border-radius:999px; color:var(--ink); background:var(--yellow); font-size:.6rem; font-weight:900; letter-spacing:.08em; } .page-hero { position:relative; isolation:isolate; overflow:hidden; padding: 100px 0 70px; background:linear-gradient(135deg,rgba(var(--fx-blue-rgb),.07),transparent 46%),linear-gradient(315deg,rgba(var(--fx-red-rgb),.035),transparent 42%); } .page-hero::before,.product-detail-hero::before { content:""; position:absolute; z-index:-1; width:440px; height:440px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(var(--fx-blue-rgb),.13),rgba(var(--fx-blue-rgb),0) 68%); filter:blur(2px); animation:eckAmbientDrift 13s ease-in-out infinite alternate; } .page-hero::before { top:-260px; right:5%; } .page-hero::after { content:""; position:absolute; z-index:-1; right:7%; bottom:18%; width:120px; height:120px; border:1px solid rgba(var(--fx-blue-rgb),.12); border-radius:32px; pointer-events:none; transform:rotate(18deg); box-shadow:0 0 0 24px rgba(var(--fx-blue-rgb),.025),0 0 0 48px rgba(var(--fx-red-rgb),.014); } .page-hero > .container,.product-detail-hero > .container { position:relative; z-index:1; } .page-hero p { max-width: 720px; margin: 28px 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.75; } .service-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; } .service-filter button { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--card-bg); font-size: .85rem; font-weight: 700; } .service-filter button.active, .service-filter button:hover { color: #fff; border-color: var(--ink); background: var(--ink); } .service-item.is-hidden { display: none; } .product-detail-hero { position:relative; isolation:isolate; overflow:hidden; padding: 60px 0 72px; background:linear-gradient(125deg,var(--surface),rgba(var(--fx-blue-rgb),.055)); } .product-detail-hero::before { right:-170px; bottom:-270px; } .back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 60px; color: var(--muted); font-size: .9rem; font-weight: 700; } .product-detail-hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 7rem); font-weight: 800; line-height: .9; letter-spacing: -.08em; } .product-detail-hero p { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: 1.2rem; line-height: 1.7; } .price-panel { display: flex; flex-direction: column; gap: 8px; padding: 28px; border:1px solid rgba(var(--fx-blue-rgb),.12); border-radius: var(--radius); background-color: var(--card-bg); background-image:linear-gradient(145deg,rgba(var(--fx-blue-rgb),.075),transparent 52%); box-shadow:0 18px 55px rgba(15,27,54,.08); } .price-panel small { color: var(--muted); } .price-panel strong { font-size: 2.4rem; letter-spacing: -.06em; } .price-panel span { display: flex; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); } .detail-content h2 { margin-bottom: 22px; font-size: 2rem; font-weight: 800; letter-spacing: -.05em; } .detail-content > p { color: #555d68; font-size: 1.12rem; line-height: 1.85; } .deliverables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; } .deliverables-grid div { display: flex; gap: 12px; padding: 18px; border-radius: 16px; background: var(--surface); font-weight: 600; } .deliverables-grid i { color: var(--blue); } .product-variant-list { display:grid; gap:10px; margin-top:34px; } .product-variant-list article { position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background-color:var(--card-bg); background-image:linear-gradient(110deg,rgba(var(--fx-blue-rgb),.045),transparent 34%); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; } .product-variant-list article:hover { transform:translateX(4px); border-color:rgba(var(--fx-blue-rgb),.3); box-shadow:0 14px 36px rgba(var(--fx-blue-rgb),.08); } .product-variant-list article p { margin:4px 0 0; color:var(--muted); font-size:.82rem; } .product-variant-list article > span { flex:none; font-weight:800; } .order-card, .builder-summary { position: sticky; isolation:isolate; overflow:hidden; top: 110px; display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: var(--radius); color: #fff; background:linear-gradient(145deg,#101b2d 0%,var(--ink) 48%,#090c12 100%); box-shadow:0 28px 70px rgba(5,10,19,.18); } .order-card::after,.builder-summary::after { content:""; position:absolute; z-index:-1; top:-90px; right:-80px; width:220px; height:220px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(var(--fx-blue-rgb),.28),transparent 66%); animation:eckAmbientDrift 10s ease-in-out infinite alternate-reverse; } .order-card h3 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.05em; } .order-card p { color: rgba(255,255,255,.65); line-height: 1.65; } .order-card .btn-dark { color: var(--ink); background: #fff; border-color: #fff; } .order-card .btn-outline-dark { color: #fff; border-color: rgba(255,255,255,.25); } .order-whatsapp-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 700; } .order-whatsapp-link:hover { color: #fff; } .product-order-form { display:grid; gap:12px; } .product-order-form label { display:grid; gap:6px; color:rgba(255,255,255,.65); font-size:.72rem; font-weight:800; } .product-cover { position:relative; margin-bottom: 50px; overflow: hidden; border-radius: 28px; background: var(--surface); } .product-cover img { display: block; width: 100%; max-height: 720px; object-fit: cover; } .public-service-search { position:relative; display:grid; gap:18px; margin-bottom:18px; padding:26px; overflow:hidden; border:1px solid rgba(var(--fx-blue-rgb),.18); border-radius:24px; background:radial-gradient(circle at 90% -20%,rgba(var(--fx-blue-rgb),.15),transparent 42%),var(--surface); box-shadow:0 20px 55px rgba(11,31,66,.07); } .public-service-search::after { content:""; position:absolute; right:-42px; bottom:-82px; width:180px; height:180px; border:1px solid rgba(var(--fx-blue-rgb),.12); border-radius:50%; box-shadow:0 0 0 34px rgba(var(--fx-blue-rgb),.025); pointer-events:none; } .public-service-search-heading { position:relative; z-index:1; display:grid; gap:5px; } .public-service-search-heading>span { color:var(--blue); font-size:.62rem; font-weight:900; letter-spacing:.14em; } .public-service-search-heading h2 { margin:0; font-size:clamp(1.35rem,2.5vw,2rem); font-weight:850; letter-spacing:-.045em; } .public-service-search-heading p { margin:0; color:var(--muted); font-size:.82rem; } .public-service-searchbox { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:58px; padding:0 16px; border:1px solid var(--line); border-radius:17px; background:var(--card-bg); box-shadow:0 12px 32px rgba(9,28,62,.06); transition:border-color .2s ease,box-shadow .2s ease; } .public-service-searchbox:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(var(--fx-blue-rgb),.1),0 14px 38px rgba(9,28,62,.08); } .public-service-searchbox>i { color:var(--blue); font-size:1.1rem; } .public-service-searchbox input { min-width:0; border:0; outline:0; padding:0; background:transparent; color:var(--ink); font-size:.95rem; font-weight:700; } .public-service-searchbox input::placeholder { color:var(--muted); font-weight:600; } .public-service-searchbox button { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:10px; color:var(--muted); background:var(--soft); } .public-service-search-meta { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:15px; } .public-service-search-meta span { color:var(--blue); font-size:.7rem; font-weight:850; } .public-service-search-meta small { color:var(--muted); font-size:.66rem; } .public-service-search-empty { display:grid; justify-items:center; gap:7px; padding:45px 24px; border:1px dashed var(--line); border-radius:20px; color:var(--muted); text-align:center; background:var(--surface); } .public-service-search-empty[hidden] { display:none; } .public-service-search-empty i { display:grid; place-items:center; width:50px; height:50px; margin-bottom:4px; border-radius:15px; color:var(--blue); background:rgba(var(--fx-blue-rgb),.09); font-size:1.2rem; } .public-service-search-empty strong { color:var(--ink); } .public-service-search-empty small { max-width:430px; } .builder-list { display: flex; flex-direction: column; gap: 12px; } .builder-item[hidden] { display:none; } .builder-item.is-search-result { animation:publicSearchResult 1.3s ease; } @keyframes publicSearchResult { 0%,100%{border-color:var(--line);box-shadow:none} 25%,70%{border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--fx-blue-rgb),.1),0 18px 45px rgba(var(--fx-blue-rgb),.12)} } .builder-item { position: relative; overflow:hidden; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background-color:var(--card-bg); background-image:linear-gradient(118deg,rgba(var(--fx-blue-rgb),.032),transparent 28%); transition:border-color .25s ease,box-shadow .3s ease,transform .3s ease; } .builder-item:hover, .builder-item:has(.builder-toggle:checked) { border-color: var(--blue); box-shadow: 0 12px 36px rgba(31,116,255,.10); } .builder-item.is-variant-required { border-color:#e5a11a; box-shadow:0 12px 36px rgba(229,161,26,.12); } .builder-item.is-variant-required [data-variant-select] { border-color:#e5a11a; box-shadow:0 0 0 3px rgba(229,161,26,.10); } .builder-item.is-variant-required .builder-price { color:#b87300; } .builder-item:hover { transform:translateY(-2px); } .builder-item.is-coming-soon { border-style:dashed; background:linear-gradient(120deg,rgba(31,116,255,.035),transparent); } .builder-item.is-coming-soon:hover { border-color:var(--line); box-shadow:none; } .builder-item-head { display: grid; grid-template-columns: 36px 54px 1fr auto; align-items: center; gap: 16px; } .builder-toggle { position: absolute; opacity: 0; pointer-events: none; } .builder-check { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line); border-radius: 9px; color: transparent; } .builder-toggle:checked + .builder-check { color: #fff; border-color: var(--blue); background: var(--blue); } .builder-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--surface); font-size: 1.2rem; } .builder-copy { display: flex; flex-direction: column; gap: 5px; } .builder-copy strong { font-size: 1rem; } .builder-copy small { color: var(--muted); } .builder-price { font-weight: 800; } .builder-item.is-coming-soon .builder-price { color:var(--blue); } .builder-item.is-coming-soon .builder-check { opacity:.45; cursor:not-allowed; } .builder-coming-soon { display:flex; align-items:center; gap:12px; margin:18px 0 0 106px; padding:15px 17px; border:1px solid rgba(31,116,255,.18); border-radius:14px; background:rgba(31,116,255,.06); } .builder-coming-soon>i { color:var(--blue); font-size:1.15rem; } .builder-coming-soon>span { display:grid; gap:3px; } .builder-coming-soon strong { font-size:.78rem; } .builder-coming-soon small { color:var(--muted); font-size:.7rem; } .builder-options { display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 14px; margin: 18px 0 0 106px; padding-top: 18px; border-top: 1px solid var(--line); } .builder-options > label { display: grid; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 800; } .quantity-control { display: grid; grid-template-columns: 40px 1fr 40px; } .quantity-control button { border: 1px solid var(--line); background: var(--surface); } .quantity-control button:first-child { border-radius: 12px 0 0 12px; } .quantity-control button:last-child { border-radius: 0 12px 12px 0; } .quantity-control input { border-radius: 0; text-align: center; } .builder-addons { display:grid; gap:10px; margin:18px 0 0 106px; padding-top:18px; border-top:1px solid var(--line); } .builder-addons-title { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .builder-addon-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .builder-addon { min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background-color:var(--surface); background-image:linear-gradient(135deg,rgba(var(--fx-blue-rgb),.04),transparent 54%); transition:border-color .25s ease,background-color .25s ease,transform .25s ease; } .builder-addon:hover { transform:translateY(-2px); border-color:rgba(var(--fx-blue-rgb),.28); } .builder-addon>label { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:10px; cursor:pointer; } .builder-addon>label>input { position:absolute; opacity:0; pointer-events:none; } .builder-addon>label>span { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:8px; color:transparent; background:var(--card-bg); } .builder-addon>label>input:checked+span { color:#fff; border-color:var(--blue); background:var(--blue); } .builder-addon>label>div,.builder-addon[data-addon-type="quantity"]>div:first-child { display:grid; gap:3px; min-width:0; } .builder-addon strong { font-size:.78rem; } .builder-addon small { color:var(--muted); font-size:.68rem; line-height:1.45; } .builder-addon[data-addon-type="quantity"] { display:grid; grid-template-columns:minmax(0,1fr) 130px; align-items:center; gap:12px; grid-column:1/-1; } .addon-quantity-control { grid-template-columns:34px 1fr 34px; } .builder-total { font-size: 3rem; line-height: 1; letter-spacing: -.075em; } .builder-selected { min-height: 100px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); } .builder-selected p { margin: 0; color: rgba(255,255,255,.58); font-size: .9rem; } .builder-selected ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .86rem; } .builder-selected li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px; } .builder-selected-copy { display:grid; gap:2px; min-width:0; } .builder-selected li strong { line-height:1.35; } .builder-selected li span { color: rgba(255,255,255,.55); font-size: .76rem; line-height:1.45; } .builder-selected li.is-incomplete span,.builder-selected li.is-incomplete .builder-selected-price { color:#ffd27a; } .builder-selected-price { flex:none; color:#fff; font-size:.82rem; font-style:normal; font-weight:800; line-height:1.35; white-space:nowrap; text-shadow:0 0 20px rgba(255,255,255,.15); animation:builderPriceReveal .25s ease both; } @keyframes builderPriceReveal { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } } .builder-summary .btn-dark { color: var(--ink); background: #fff; border-color: #fff; } .builder-whatsapp-link { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 700; } .builder-whatsapp-link.disabled { opacity: .45; pointer-events: none; } .summary-note { color: rgba(255,255,255,.5); line-height: 1.55; } .portfolio-grid-page .portfolio-card:nth-child(3n) { grid-column: span 6; } .portfolio-detail { padding: 72px 0 120px; } .portfolio-detail-head { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; } .portfolio-detail-head h1 { max-width: 900px; margin: 0; font-size: clamp(3.2rem, 8vw, 8rem); font-weight: 800; line-height: .9; letter-spacing: -.085em; } .portfolio-detail-head > p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; } .portfolio-detail-art { position:relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 620px; margin: 70px 0 0; padding: clamp(28px,5vw,70px); border-radius: 32px; color: #fff; overflow: hidden; background: var(--ink); } .portfolio-detail-art.portfolio-accent-blue { background: linear-gradient(135deg,#071b43,var(--blue)); } .portfolio-detail-art.portfolio-accent-red { background: linear-gradient(135deg,#3b0011,var(--red)); } .portfolio-detail-art.portfolio-accent-yellow { color: var(--ink); background: linear-gradient(135deg,#ffe57d,var(--yellow)); } .portfolio-detail-art > span:not(.brand-watermark) { align-self: center; margin: auto; font-size: clamp(6rem,18vw,18rem); font-weight: 800; line-height: 1; letter-spacing: -.12em; } .portfolio-detail-art > img { width: 100%; max-height: 520px; margin: auto 0; border-radius: 22px; object-fit: cover; } .portfolio-detail-art small { letter-spacing: .16em; } .brand-watermark{position:absolute!important;z-index:4!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;display:block!important;width:var(--watermark-width,32%)!important;min-width:112px!important;max-width:420px!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;color:inherit!important;background:transparent!important;opacity:var(--watermark-opacity,.34)!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;backdrop-filter:none!important}.brand-watermark img{position:static!important;display:block!important;width:100%!important;height:auto!important;max-width:none!important;max-height:96px!important;margin:0!important;border:0!important;border-radius:0!important;object-fit:contain!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(0,0,0,.45))!important}.product-card:hover .brand-watermark img{transform:none}.portfolio-detail-art>.brand-watermark,.product-cover>.brand-watermark{top:50%!important;left:50%!important;right:auto!important;bottom:auto!important}.protected-media{position:relative;-webkit-user-select:none;user-select:none}.protected-media>img,.protected-media>video{-webkit-user-drag:none;user-select:none} .portfolio-detail-meta { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px; } .portfolio-detail-meta div { display: flex; flex-direction: column; gap: 5px; padding: 24px; border-right: 1px solid var(--line); } .portfolio-detail-meta div:last-child { border-right: 0; } .portfolio-detail-meta small { color: var(--muted); } .about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; } .about-statement { display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; padding: 38px; border-radius: 30px; color: #fff; background: var(--ink); } .about-statement span { font-size: clamp(7rem,15vw,13rem); font-weight: 800; line-height: .9; letter-spacing: -.12em; } .about-statement small { letter-spacing: .16em; } .about-copy h2 { margin-bottom: 26px; font-size: clamp(2.2rem,4.5vw,4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.065em; } .about-copy p { color: var(--muted); font-size: 1.08rem; line-height: 1.85; } .about-copy ul { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; } .about-copy li { padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 700; } .contact-form, .checkout-form-card { display: flex; flex-direction: column; gap: 22px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--card-bg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form label, .checkout-form-card label { display: flex; flex-direction: column; gap: 8px; color: #5d6470; font-size: .8rem; font-weight: 700; } .contact-form .form-control, .contact-form .form-select, .checkout-form-card .form-control { min-height: 50px; border-color: var(--line); border-radius: 14px; } .form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; } .contact-card { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; padding: 34px; border-radius: 24px; color: #fff; background: var(--ink); } .contact-card div { display: flex; flex-direction: column; gap: 7px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); } .contact-card small { color: rgba(255,255,255,.45); font-size: .68rem; font-weight: 800; letter-spacing: .14em; } .contact-card a:not(.btn), .contact-card strong { font-size: 1rem; font-weight: 700; } .checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; align-items: start; gap: 30px; } .checkout-form-card h2 { margin: 12px 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.04em; } .payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .payment-options label { cursor: pointer; } .payment-options input { position: absolute; opacity: 0; } .payment-options label > span { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; min-height: 110px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; transition: .2s; } .payment-options input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,116,255,.1); } .payment-options i { grid-row: span 2; align-self: center; color: var(--blue); font-size: 1.35rem; } .payment-options strong { align-self: end; color: var(--ink); } .payment-options small { align-self: start; color: var(--muted); font-weight: 500; } .payment-options .is-disabled { opacity: .48; cursor: not-allowed; } .checkout-summary { position: sticky; top: 110px; padding: 30px; border-radius: 24px; color: #fff; background: var(--ink); } .checkout-items { display: grid; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); } .checkout-items div, .checkout-total { display: flex; justify-content: space-between; gap: 16px; } .checkout-items span { color: rgba(255,255,255,.62); font-size: .85rem; } .checkout-items span, .success-row span, .admin-order-items span { display: grid; gap: 3px; } .checkout-items span strong { color: #fff; } .checkout-items span small, .success-row span small, .admin-order-items span small { color: inherit; font-size: .74rem; } .discount-code-box { display:grid; gap:8px; margin-top:20px; } .discount-code-box > label { color:rgba(255,255,255,.6); font-size:.72rem; font-weight:800; } .discount-code-box > div { display:grid; grid-template-columns:1fr auto; gap:8px; } .discount-code-box .form-control { min-width:0; color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08); text-transform:uppercase; } .discount-code-box .form-control::placeholder { color:rgba(255,255,255,.35); text-transform:none; } .discount-code-box small { min-height:18px; color:rgba(255,255,255,.55); font-size:.7rem; } .discount-code-box small.is-success { color:#78e3a5; } .discount-code-box small.is-error { color:#ff8caa; } .checkout-price-row { display:flex; justify-content:space-between; gap:16px; padding-top:18px; color:rgba(255,255,255,.65); font-size:.84rem; } .checkout-discount-row strong { color:#78e3a5; } .checkout-total { align-items: end; padding: 24px 0; } .checkout-total strong { font-size: 2rem; letter-spacing: -.06em; } .bank-account-list { display:grid; gap:12px; margin-top:24px; } .bank-account-list>h2 { margin:0; }.bank-account-list>p { margin:-5px 0 5px; color:var(--muted); font-size:.82rem; } .bank-account-option { display:grid; grid-template-columns:auto 52px minmax(0,1fr) auto; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); border-radius:18px; cursor:pointer; background:var(--surface); } .bank-account-option:has(input:checked) { border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,145,255,.1); } .bank-account-option input { width:18px; height:18px; accent-color:var(--blue); }.bank-account-option>span:nth-of-type(2){display:grid;gap:3px}.bank-account-option small{color:var(--muted);font-size:.72rem}.bank-account-option b{color:#087f5b;font-size:.78rem;white-space:nowrap} .bank-account-logo { display:grid; place-items:center; width:52px; height:42px; overflow:hidden; border-radius:10px; background:#f3f5f7; font-weight:800; }.bank-account-logo img{width:100%;height:100%;object-fit:contain;padding:6px} .brief-field-wide { grid-column:1/-1; } .checkout-summary > p { color: rgba(255,255,255,.5); font-size: .78rem; line-height: 1.6; } .empty-state { display: grid; justify-items: center; gap: 16px; padding: 70px 20px; border: 1px dashed var(--line); border-radius: 24px; text-align: center; } .empty-state i { font-size: 3rem; color: var(--blue); } .order-success-page { padding: 90px 0 120px; text-align: center; } .success-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 1.8rem; } .order-success-page > .container > h1 { max-width: 850px; margin: 0 auto; font-size: clamp(3rem,7vw,6.5rem); font-weight: 800; line-height: .92; letter-spacing: -.075em; } .order-success-page > .container > p { max-width: 650px; margin: 25px auto 50px; color: var(--muted); font-size: 1.05rem; } .success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; } .success-grid > section { padding: 30px; border: 1px solid var(--line); border-radius: 24px; } .success-grid h2 { margin-bottom: 22px; font-size: 1.3rem; font-weight: 800; } .success-row, .success-total { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; } .success-row { border-bottom: 1px solid var(--line); } .success-row span, .success-grid p { color: var(--muted); } .success-total { padding-top: 22px; font-size: 1.15rem; } .bank-box { display: grid; gap: 6px; margin: 22px 0; padding: 20px; border-radius: 16px; background: var(--surface); } .bank-box small { margin-top: 8px; color: var(--muted); font-size: .68rem; letter-spacing: .12em; } .order-workspace-page { padding:72px 0 120px; background:#f4f5f7; } .order-workspace-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:42px; } .order-workspace-head h1 { max-width:850px; margin:12px 0 0; font-size:clamp(3rem,6vw,6.2rem); font-weight:800; line-height:.94; letter-spacing:-.075em; } .order-workspace-head p { max-width:720px; margin:24px 0 0; color:var(--muted); line-height:1.7; } .order-head-status { display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:none; } .workspace-status { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:var(--card-bg); font-size:.76rem; font-weight:800; } .workspace-status.is-positive { color:#087a3e; border-color:#bfe8d0; background:#effbf4; } .order-stepper { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:24px; padding:26px 28px; border:1px solid var(--line); border-radius:24px; background:var(--card-bg); } .order-stepper > div { position:relative; display:grid; justify-items:center; gap:10px; color:#9aa0aa; font-size:.72rem; } .order-stepper > div::after { content:""; position:absolute; z-index:0; top:18px; left:calc(50% + 24px); width:calc(100% - 48px); height:2px; background:var(--line); } .order-stepper > div:last-child::after { display:none; } .order-stepper > div > span { position:relative; z-index:1; display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--line); border-radius:50%; background:#fff; } .order-stepper > div.is-done { color:var(--ink); } .order-stepper > div.is-done > span { color:#fff; border-color:var(--blue); background:var(--blue); } .order-stepper > div.is-done::after { background:var(--blue); } .order-stepper.is-cancelled { opacity:.55; } .order-progress-overview { display:grid; grid-template-columns:1fr auto; gap:10px 20px; margin-bottom:12px; padding:18px 22px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg); } .order-progress-overview>div:first-child { display:flex; align-items:center; justify-content:space-between; grid-column:1/-1; gap:20px; } .order-progress-overview span { color:var(--blue); font-size:.65rem; font-weight:900; letter-spacing:.14em; } .order-progress-overview strong { font-size:1.25rem; } .order-progress-overview small { grid-column:2; color:var(--muted); font-size:.68rem; white-space:nowrap; } .order-progress-meter { align-self:center; height:7px; overflow:hidden; border-radius:99px; background:var(--surface); } .order-progress-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#69bbff); transition:width .5s ease; } .order-stage-stepper { grid-template-columns:repeat(6,1fr); } .order-stage-stepper>div { text-align:center; } .order-stage-stepper>div>small { max-width:130px; color:var(--muted); font-size:.61rem; line-height:1.4; } .order-stage-stepper>div.is-current>span { color:var(--blue); border-color:var(--blue); box-shadow:0 0 0 6px rgba(34,145,255,.1); } .order-workspace-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr); gap:24px; align-items:start; } .order-workspace-main { display:grid; gap:24px; } .order-workspace-side { position:sticky; top:104px; display:grid; gap:18px; } .workspace-card { padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--card-bg); box-shadow:0 16px 50px rgba(17,25,39,.035); } .workspace-card > span,.workspace-card-head span { color:var(--blue); font-size:.65rem; font-weight:900; letter-spacing:.14em; } .workspace-card h2,.workspace-card-head h2 { margin:7px 0 0; font-size:1.55rem; font-weight:800; letter-spacing:-.045em; } .workspace-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; } .workspace-card-head > strong { font-size:1.8rem; letter-spacing:-.06em; } .workspace-card-head > i { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; background:var(--ink); } .workspace-discount-note { display:flex; justify-content:space-between; gap:16px; margin:-8px 0 20px; padding:13px 15px; border-radius:13px; color:#087a3e; background:#e9f8ef; font-size:.76rem; } .workspace-items { display:grid; } .workspace-items article { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 0; border-top:1px solid var(--line); } .workspace-items article > div { display:grid; gap:4px; } .workspace-items article small { color:var(--muted); } .workspace-empty-files { display:grid; justify-items:center; gap:10px; padding:38px 20px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; } .workspace-empty-files i { color:var(--blue); font-size:2rem; } .workspace-empty-files p { margin:0; } .order-file-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .order-file-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--card-bg); } .order-file-preview { display:grid; place-items:center; height:210px; overflow:hidden; color:#fff; background:#10141c; } .order-file-preview img,.order-file-preview video { width:100%; height:100%; object-fit:contain; } .order-file-preview > i { font-size:3.2rem; } .order-file-copy { padding:18px; } .order-file-copy > span { color:var(--blue); font-size:.62rem; font-weight:900; letter-spacing:.12em; } .order-file-copy h3 { margin:7px 0 5px; font-size:1rem; font-weight:800; } .order-file-copy p { margin:0 0 16px; color:var(--muted); font-size:.72rem; } .order-file-copy .btn { font-size:.72rem; } .item-work-status { display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; color:#626a75; background:#eef0f3; font-size:.67rem; font-weight:800; white-space:nowrap; } .item-work-status.status-designing,.item-work-status.status-review { color:#075fc9; background:#e9f2ff; } .item-work-status.status-completed,.item-work-status.status-resolved,.item-work-status.status-approved { color:#087a3e; background:#e9f8ef; } .workspace-form { display:grid; gap:18px; } .workspace-form label { display:grid; gap:7px; color:#4e5662; font-size:.75rem; font-weight:800; } .workspace-form .form-grid { gap:16px; } .workspace-form .btn { justify-self:start; } .brief-service-groups { display:grid; gap:16px; } .brief-service-group { padding:20px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(130deg,rgba(34,145,255,.045),var(--card-bg) 28%); } .brief-service-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid var(--line); } .brief-service-head>i { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; color:var(--blue); background:rgba(34,145,255,.1); } .brief-service-head>div { display:grid; gap:3px; } .brief-service-head strong { font-size:.88rem; } .brief-service-head small { color:var(--muted); font-size:.66rem; } .compact-form { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); } .compact-form h3 { margin:0; font-size:1rem; font-weight:800; } .workspace-log { display:grid; gap:12px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); } .workspace-log article { display:grid; grid-template-columns:1fr auto; gap:8px 18px; padding:18px; border-radius:16px; background:var(--surface); } .workspace-log article > div { display:grid; gap:3px; } .workspace-log small { color:var(--muted); } .workspace-log p { grid-column:1 / -1; margin:5px 0 0; color:#555d68; line-height:1.65; } .payment-workspace-card > p { color:var(--muted); } .notice-history { display:grid; gap:8px; margin-top:18px; } .notice-history > div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:.72rem; } .order-update-list { display:grid; gap:16px; margin-top:22px; } .order-update-list > p { margin:0; color:var(--muted); } .order-update-list article { display:flex; gap:12px; } .order-update-list article i { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--blue); } .order-update-list article p { margin:2px 0 4px; color:#414954; font-size:.82rem; line-height:1.55; } .order-update-list article small { color:var(--muted); font-size:.68rem; } .order-link-note { display:flex; gap:12px; padding:17px; border:1px solid #eedfa9; border-radius:17px; color:#67591d; background:#fff9de; } .order-link-note i { flex:none; } .order-link-note p { margin:0; font-size:.76rem; line-height:1.55; } .article-page { padding: 80px 0 120px; } .article-container { max-width: 900px; } .article-page h1 { margin: 0 0 24px; font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 800; line-height: .95; letter-spacing: -.075em; } .article-page time { color: var(--muted); } .article-lead { margin: 54px 0 30px; padding: 28px; border-left: 4px solid var(--blue); background: var(--surface); font-size: 1.3rem; line-height: 1.6; } .article-body { font-size: 1.08rem; line-height: 1.9; } .not-found { display: grid; min-height: 65vh; place-items: center; } .not-found span { color: var(--blue); font-size: clamp(6rem, 20vw, 15rem); font-weight: 800; letter-spacing: -.1em; } .not-found h1 { margin-bottom: 30px; font-weight: 800; } .site-footer { position:relative;overflow:hidden;padding:20px 0 28px;color:#fff;background:radial-gradient(circle at 85% 0,rgba(31,116,255,.18),transparent 30%),#080b10; }.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.025) 48.2% 48.4%,transparent 48.6%)} .footer-panel { position:relative;display:grid;grid-template-columns:minmax(230px,1.2fr) .55fr .65fr minmax(260px,.9fr);gap:clamp(28px,4vw,70px);padding:72px 0; } .footer-brand-column{max-width:360px}.footer-copy{color:rgba(255,255,255,.55);line-height:1.75}.footer-column>strong{display:block;margin-bottom:20px;color:rgba(255,255,255,.38);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.footer-socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.footer-socials a{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#fff;background:rgba(255,255,255,.035);transition:.25s}.footer-socials a:hover{transform:translateY(-3px);border-color:var(--blue);background:var(--blue)} .footer-copy { max-width: 460px; color: rgba(255,255,255,.55); } .footer-links { display:grid;grid-template-columns:1fr;gap:13px; } .footer-links a { color: rgba(255,255,255,.72); } .footer-links a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-size: .8rem; } .footer-contact-card{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}.footer-contact-card>span{color:#6fa8ff;font-size:.62rem;font-weight:800;letter-spacing:.14em}.footer-contact-card>strong{margin:12px 0 9px;font-size:1.35rem;letter-spacing:-.04em}.footer-contact-card p{margin:0 0 22px;color:rgba(255,255,255,.5);font-size:.86rem;line-height:1.65}.footer-contact-card a{display:inline-flex;align-items:center;gap:9px;margin-top:auto;color:#fff;font-weight:750} .support-actions { position: fixed; z-index: 1080; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; visibility: visible; opacity: 1; pointer-events: auto; } .support-button { position:relative; display: inline-flex; align-items: center; justify-content:center; gap: 9px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; color: #fff; box-shadow: 0 14px 36px rgba(0,0,0,.18); font-size: .84rem; font-weight: 800; transition:transform .25s ease,box-shadow .25s ease,filter .25s ease; } .support-button:hover,.support-button:focus-visible { color:#fff; transform:translateY(-2px); box-shadow:0 18px 42px rgba(0,0,0,.24); filter:brightness(1.04); } .support-button:focus-visible { outline:3px solid rgba(var(--fx-blue-rgb),.28); outline-offset:3px; } .whatsapp-button { background: #1fba59; } .chat-button { background: var(--blue); } .support-button i { font-size: 1.15rem; } .chat-panel { position: fixed; z-index: 1090; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 122px); width: min(410px, calc(100vw - 40px)); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card-bg); box-shadow: 0 28px 90px rgba(8,12,22,.23); opacity: 0; visibility:hidden; transform: translateY(18px) scale(.98); pointer-events: none; transition:opacity .22s ease,visibility .22s ease,transform .22s ease; } .chat-panel.is-open { opacity: 1; visibility:visible; transform: translateY(0) scale(1); pointer-events: auto; } .chat-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: #fff; background: var(--ink); } .chat-identity { display: flex; align-items: center; gap: 12px; } .chat-identity > div { display:grid; gap:2px; } .chat-identity small { color:rgba(255,255,255,.5); font-size:.65rem; font-weight:600; } .online-dot { width: 9px; height: 9px; border-radius: 50%; background: #35dc77; box-shadow: 0 0 0 5px rgba(53,220,119,.12); } .chat-head button { border: 0; color: #fff; background: none; } .chat-body { max-height:min(520px,calc(100vh - 330px)); overflow-y:auto; padding: 20px; } .chat-intro { display:grid; gap:7px; } .chat-intro > small { padding-left:4px; color:var(--muted); font-size:.66rem; } .bot-message { padding: 14px 16px; border-radius: 6px 17px 17px 17px; background: var(--surface); font-size: .9rem; line-height: 1.55; } .chat-conversation { display:flex; flex-direction:column; gap:12px; max-height:290px; margin-top:16px; overflow-y:auto; scrollbar-width:thin; } .chat-message { display:flex; flex-direction:column; align-items:flex-start; max-width:88%; } .chat-message.is-visitor { align-self:flex-end; align-items:flex-end; } .chat-bubble { padding:11px 14px; border-radius:5px 16px 16px 16px; color:var(--text); background:var(--surface); font-size:.84rem; line-height:1.55; white-space:pre-wrap; } .chat-message.is-visitor .chat-bubble { border-radius:16px 5px 16px 16px; color:#fff; background:var(--blue); } .chat-message > small { margin-top:4px; padding:0 4px; color:var(--muted); font-size:.59rem; } .chat-message.is-typing .chat-bubble { color:var(--muted); animation:chatPulse 1.2s ease-in-out infinite; } @keyframes chatPulse { 50% { opacity:.5; } } .quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; } .quick-replies button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color:var(--text); background: var(--card-bg); font-size: .78rem; font-weight: 700; } .quick-replies button:hover { color: #fff; border-color: var(--blue); background: var(--blue); } .chat-form { display: grid; grid-template-columns: 1fr 42px; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat-form input { min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; color:var(--text); background:var(--field-bg); outline: none; font-size: .82rem; } .chat-form input:focus { border-color: var(--blue); } .chat-form button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 13px; color: #fff; background: var(--blue); } .chat-form button:disabled { opacity:.55; } .chat-safety { display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px 11px; color:var(--muted); background:var(--card-bg); font-size:.62rem; } .chat-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; color: #fff; background: #1fba59; font-size: .85rem; font-weight: 800; } .mobile-order-dock,.mobile-services-order-card { display:none; } html[data-theme="dark"] { --ink:#080b10; --muted:#9da7b5; --surface:#191f29; --line:#2b3441; --shadow:0 24px 70px rgba(0,0,0,.3); --page-bg:#0d1118; --card-bg:#141a23; --text:#eef2f8; --field-bg:#0f151e; color-scheme:dark; } html[data-theme="dark"] .site-header { background:rgba(13,17,24,.88); border-bottom-color:rgba(255,255,255,.08); } html[data-theme="dark"] .site-header.is-scrolled { box-shadow:0 14px 42px rgba(0,0,0,.36); } html[data-theme="dark"] .navbar-toggler { border-color:var(--line); filter:invert(1); } html[data-theme="dark"] .detail-content > p, html[data-theme="dark"] .workspace-log p, html[data-theme="dark"] .order-update-list article p { color:#b1bac7; } html[data-theme="dark"] .contact-form label, html[data-theme="dark"] .checkout-form-card label, html[data-theme="dark"] .workspace-form label { color:#a8b2c0; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { color:var(--text); border-color:var(--line); background-color:var(--field-bg); } html[data-theme="dark"] .form-control::placeholder { color:#707b89; } html[data-theme="dark"] .payment-options strong, html[data-theme="dark"] .order-stepper > div.is-done { color:var(--text); } html[data-theme="dark"] .builder-item { background:var(--card-bg); } html[data-theme="dark"] .public-service-search { background:radial-gradient(circle at 90% -20%,rgba(var(--fx-blue-rgb),.16),transparent 42%),var(--surface); } html[data-theme="dark"] .order-workspace-page { background:var(--page-bg); } html[data-theme="dark"] .order-stepper > div > span { background:var(--card-bg); } html[data-theme="dark"] .brief-service-group { background:linear-gradient(130deg,rgba(34,145,255,.09),var(--card-bg) 30%); } html[data-theme="dark"] .workspace-status.is-positive { color:#7fe5aa; border-color:#28593d; background:#142c20; } html[data-theme="dark"] .workspace-discount-note { color:#75dda1; background:#153422; } html[data-theme="dark"] .order-link-note { color:#edda84; border-color:#5e5429; background:#27240f; } html[data-theme="dark"] .item-work-status { color:#bbc3ce; background:#262e39; } html[data-theme="dark"] .item-work-status.status-designing, html[data-theme="dark"] .item-work-status.status-review { color:#82b9ff; background:#142b47; } html[data-theme="dark"] .item-work-status.status-completed, html[data-theme="dark"] .item-work-status.status-resolved, html[data-theme="dark"] .item-work-status.status-approved { color:#75dda1; background:#153422; } html[data-theme="dark"] .btn-outline-dark { color:var(--text); border-color:var(--line); } html[data-theme="dark"] .btn-outline-dark:hover { color:#fff; border-color:var(--blue); background:var(--blue); } @keyframes eckPageOut { to { opacity:0; transform:scale(.992); } } @keyframes eckPageIn { from { opacity:0; filter:brightness(1.08); transform:translateY(8px) scale(.995); } to { filter:brightness(1); } } html.motion-page-enter body { animation:eckPageIn .38s cubic-bezier(.2,.75,.2,1) backwards; } html.is-page-leaving body { opacity:0; transform:translateY(-5px); } html::after { content:""; position:fixed; z-index:10000; top:0; bottom:0; left:-46vw; width:38vw; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(var(--fx-blue-rgb),.1),var(--fx-light),rgba(var(--fx-blue-rgb),.08),transparent); opacity:0; transform:skewX(-12deg); } html.is-page-leaving::after { animation:eckPageLight .34s ease-out both; } .motion-ready .reveal-on-scroll { opacity:0; transform:translateY(28px); transition:opacity .68s ease var(--reveal-delay,0ms),transform .68s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms); } .motion-ready .reveal-on-scroll.is-revealed { opacity:1; transform:none; } .motion-ready .section-heading.reveal-on-scroll .eyebrow,.motion-ready .page-hero .eyebrow { position:relative; overflow:hidden; } .motion-ready .section-heading.reveal-on-scroll .eyebrow::after,.motion-ready .page-hero .eyebrow::after { content:""; display:block; width:100%; height:1px; margin-top:7px; background:linear-gradient(90deg,var(--blue),rgba(var(--fx-blue-rgb),.08)); transform:scaleX(0); transform-origin:left; transition:transform .7s .18s cubic-bezier(.2,.75,.2,1); } .motion-ready .section-heading.reveal-on-scroll.is-revealed .eyebrow::after,.motion-ready .page-hero .is-revealed .eyebrow::after { transform:scaleX(1); } .text-link,.post-card > a,.footer-links a,.utility-bar a { background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 1px; transition:color .24s ease,background-size .34s cubic-bezier(.2,.75,.2,1); } .text-link:hover,.text-link:focus-visible,.post-card > a:hover,.post-card > a:focus-visible,.footer-links a:hover,.footer-links a:focus-visible,.utility-bar a:hover,.utility-bar a:focus-visible { background-size:100% 1px; } .has-pointer-light { position:relative; isolation:isolate; overflow:hidden; --pointer-x:50%; --pointer-y:50%; } .has-pointer-light::before { content:""; position:absolute; z-index:0; inset:-1px; pointer-events:none; border-radius:inherit; background:radial-gradient(360px circle at var(--pointer-x) var(--pointer-y),rgba(var(--fx-blue-rgb),.12),transparent 48%); opacity:0; transition:opacity .32s ease; } .has-pointer-light > * { position:relative; z-index:1; } .has-pointer-light:hover::before,.has-pointer-light:focus-within::before { opacity:1; } .product-card-visual img,.portfolio-card > a,.server-logo-card,.ready-package-grid article { will-change:transform; } @keyframes eckSliderProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } } @keyframes eckHeroLight { 0% { opacity:0; transform:translateX(-38%) rotate(3deg); } 32% { opacity:.75; } 100% { opacity:0; transform:translateX(165%) rotate(3deg); } } @keyframes eckHeroCopyIn { from { opacity:0; filter:blur(5px); transform:translateY(18px); } to { opacity:1; filter:blur(0); transform:none; } } @keyframes eckPageLight { 0% { left:-46vw; opacity:0; } 34% { opacity:.75; } 100% { left:112vw; opacity:0; } } @keyframes eckAmbientDrift { from { transform:translate3d(-10px,-6px,0) scale(.96); } to { transform:translate3d(18px,14px,0) scale(1.06); } } main { overflow:clip; } main > section.section-space:not(.order-cta-section):not(.process-section):nth-of-type(even) { background:linear-gradient(120deg,rgba(var(--fx-blue-rgb),.026),transparent 38%,rgba(var(--fx-red-rgb),.016)); } html[data-theme="dark"] main > section.section-space:not(.order-cta-section):not(.process-section):nth-of-type(even) { background:linear-gradient(120deg,rgba(var(--fx-blue-rgb),.052),transparent 42%,rgba(var(--fx-red-rgb),.025)); } @media (max-width: 991.98px) { .home-showcase { grid-template-columns:1fr; } .hero-slide { min-height: 650px; padding-bottom: 100px; } .showcase-stack { grid-template-columns:1fr 1fr; grid-template-rows:none; } .showcase-card { min-height:260px; } .navbar-collapse { padding: 14px 0 8px; } .navbar-nav { gap:4px; } .navbar-collapse .nav-link { padding:11px 13px; border-radius:13px; } .nav-mobile-order-item { order:-1; margin-bottom:8px; } .nav-mobile-order-link { display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:12px; padding:12px!important; color:#fff!important; background:linear-gradient(135deg,#1f74ff,#1456cb)!important; box-shadow:0 14px 34px rgba(31,116,255,.24); opacity:1; } .nav-mobile-order-link:hover,.nav-mobile-order-link:focus-visible { color:#fff; background-size:0; transform:translateY(-1px); } .nav-mobile-order-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:13px; background:rgba(255,255,255,.12); font-size:1.05rem; } .nav-mobile-order-copy { display:grid; gap:2px; min-width:0; } .nav-mobile-order-copy strong { font-size:.88rem; font-weight:800; } .nav-mobile-order-copy small { display:block; overflow:hidden; color:rgba(255,255,255,.7); font-size:.65rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .nav-mobile-order-arrow { display:block; justify-self:end; } .nav-desktop-order-cta { display:none; } .section-space { padding: 78px 0; } .footer-panel { align-items: flex-start; flex-direction: column; } .footer-panel{grid-template-columns:1fr 1fr}.footer-brand-column,.footer-contact-card{grid-column:span 2}.reference-about-grid{grid-template-columns:1fr} .order-card, .builder-summary { position: static; } .m2-intro-grid { grid-template-columns:1fr; } .process-heading,.order-cta-panel { grid-template-columns:1fr; }.order-cta-action{justify-self:stretch;max-width:none} .process-grid { grid-template-columns: 1fr 1fr; } .ready-package-grid { grid-template-columns:1fr; } .server-logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .portfolio-detail-head, .about-grid, .checkout-layout { grid-template-columns: 1fr; } .checkout-summary, .contact-card { position: static; } .order-workspace-grid { grid-template-columns:1fr; } .order-workspace-side { position:static; } } @media (max-width: 767.98px) { body.has-mobile-order-dock { padding-bottom:calc(82px + env(safe-area-inset-bottom)); } .brand-mark img { max-width:178px; height:48px; } .hero-section { padding-top: 10px; } .hero-swiper, .hero-slide { border-radius: 22px; } .order-workspace-head { align-items:flex-start; flex-direction:column; } .order-head-status { align-items:flex-start; } .order-stepper { padding:20px 12px; } .order-stepper > div strong { display:none; } .order-stage-stepper { display:flex; overflow-x:auto; padding:18px; scroll-snap-type:x mandatory; } .order-stage-stepper>div { flex:0 0 118px; scroll-snap-align:start; } .order-stage-stepper>div::after { width:70px; } .order-stage-stepper>div>small { display:block; } .order-progress-overview { grid-template-columns:1fr; } .order-progress-overview small { grid-column:1; } .workspace-card { padding:22px; } .workspace-items article { align-items:flex-start; flex-direction:column; } .order-file-grid { grid-template-columns:1fr; } .references-heading { grid-template-columns:1fr; } .references-heading p { margin-top:20px; } .reference-current-grid{grid-template-columns:1fr}.reference-current-visual{min-height:270px}.reference-current-logo{height:125px} .server-logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .server-logo-card { min-height:150px; padding:20px; } .server-logo-card img { height:76px; } .hero-slide { min-height: 620px; padding: 42px 24px 95px; } .hero-slide-shade { background: linear-gradient(0deg, rgba(4,7,12,.94) 0%, rgba(4,7,12,.35) 72%, rgba(4,7,12,.12) 100%); } .hero-content h1 { font-size: clamp(2.6rem, 12vw, 4.2rem); } .hero-controls { left: 24px; right: 24px; } .utility-bar .container > span { display:none; } .utility-bar .container { justify-content:center; } .utility-bar .container > div a:first-child { display:none; } .has-mobile-order-dock .utility-bar { display:none; } .navbar-collapse { max-height:calc(100vh - 104px); overflow-y:auto; } .navbar-collapse .d-flex { align-items:stretch!important; flex-wrap:wrap; } .navbar-collapse .d-flex { justify-content:flex-end; margin-top:10px!important; } .showcase-stack { display:none; } .service-showcase-grid { grid-template-columns:1fr; margin-top:14px; } .showcase-card, .service-showcase-grid a { min-height:230px; } .m2-specialist-intro { padding-top:54px; } .m2-intro-grid { gap:28px; padding-bottom:48px; } .section-heading { align-items: flex-start; flex-direction: column; } .product-card { min-height: 340px; } .product-card-visual > .product-card-visual-icon { display:none; } .order-cta-panel { border-radius: 24px; } .deliverables-grid { grid-template-columns: 1fr; } .portfolio-card, .portfolio-card:nth-child(3n), .portfolio-grid-page .portfolio-card:nth-child(3n) { grid-column: span 12; } .portfolio-art { min-height: 300px; } .process-heading{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.process-grid { grid-template-columns: 1fr; }.process-grid article{min-height:280px;padding:23px}.process-grid h3{margin-top:42px}.order-cta-panel{gap:28px;padding:25px}.order-cta-action{min-height:370px;padding:24px}.order-cta-features{align-items:stretch;flex-direction:column}.order-cta-features span{width:100%} .form-grid, .payment-options, .success-grid { grid-template-columns: 1fr; } .portfolio-detail-art { min-height: 440px; } .portfolio-detail-meta { grid-template-columns: 1fr; } .portfolio-detail-meta div { border-right: 0; border-bottom: 1px solid var(--line); } .portfolio-detail-meta div:last-child { border-bottom: 0; } .builder-item-head { grid-template-columns: 30px 1fr auto; } .public-service-search { padding:21px; } .public-service-search-meta { align-items:flex-start; flex-direction:column; gap:4px; } .builder-icon { display: none; } .builder-copy small { display: none; } .builder-options { grid-template-columns: 1fr; margin-left: 0; } .builder-addons,.builder-coming-soon { margin-left:0; } .builder-addon-grid { grid-template-columns:1fr; } .builder-addon[data-addon-type="quantity"] { grid-column:auto; } #packageForm { margin-right:0; margin-left:0; } #packageForm > [class*="col-"] { padding-right:0; padding-left:0; } .footer-links { grid-template-columns: 1fr; } .footer-panel{grid-template-columns:1fr}.footer-brand-column,.footer-contact-card{grid-column:auto}.reference-slider-actions{align-items:flex-start;flex-direction:column}.reference-about-grid{gap:30px} .footer-bottom { flex-direction: column; } .support-button span { display: none; } .support-button { justify-content: center; width: 50px; padding: 0; } .has-mobile-order-dock .support-actions { display:none; } .has-mobile-order-dock .chat-panel { right:10px; left:10px; bottom:calc(88px + env(safe-area-inset-bottom)); width:auto; max-width:400px; margin-left:auto; } .mobile-order-dock { position:fixed; z-index:1075; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); left:10px; display:grid; grid-template-columns:50px minmax(0,1fr) 50px 50px; gap:6px; max-width:560px; margin:0 auto; padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:19px; background:rgba(10,14,22,.94); box-shadow:0 20px 55px rgba(3,8,18,.32); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .mobile-order-dock-link { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:50px; padding:0; border:0; border-radius:13px; color:rgba(255,255,255,.82); background:rgba(255,255,255,.065); font-size:.76rem; font-weight:800; } .mobile-order-dock-link.is-compact { width:50px; font-size:1.05rem; } .mobile-order-dock-link.is-whatsapp { color:#fff; background:#159b4a; } .mobile-order-dock-link.is-chat { color:#fff; background:rgba(31,116,255,.2); } .mobile-order-dock-link.is-primary { padding:0 14px; color:#fff; background:linear-gradient(135deg,#1f74ff,#1456cb); box-shadow:0 10px 25px rgba(31,116,255,.28); white-space:nowrap; } .mobile-order-dock-link.is-primary .bi-arrow-right { margin-left:auto; } .mobile-order-dock-link.is-primary span { overflow:hidden; text-overflow:ellipsis; } .mobile-order-dock-link:focus-visible { outline:3px solid rgba(31,116,255,.3); outline-offset:2px; } .mobile-services-order-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; margin:0 0 20px; padding:16px; border:1px solid rgba(var(--fx-blue-rgb),.22); border-radius:20px; background:linear-gradient(135deg,rgba(var(--fx-blue-rgb),.1),rgba(var(--fx-blue-rgb),.025)); box-shadow:0 16px 40px rgba(var(--fx-blue-rgb),.08); } .mobile-services-order-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; background:var(--blue); box-shadow:0 10px 25px rgba(var(--fx-blue-rgb),.22); } .mobile-services-order-card>div { display:grid; align-content:center; gap:3px; min-width:0; } .mobile-services-order-card strong { font-size:.9rem; letter-spacing:-.02em; } .mobile-services-order-card small { color:var(--muted); font-size:.68rem; line-height:1.45; } .mobile-services-order-card>a { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; margin-top:2px; border-radius:13px; color:#fff; background:var(--ink); font-size:.76rem; font-weight:800; } html[data-theme="dark"] .mobile-services-order-card>a { color:#0b0d12; background:#fff; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .hero-swiper::after { display:none; } } /* Sales suite: quotes, customer portal, calendar and references */ .pos-billing-fields { display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--soft); } .pos-billing-fields[hidden] { display:none; } .quote-public-grid,.customer-portal-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr); gap:26px; align-items:start; } .quote-public-grid main,.customer-portal-grid main,.customer-portal-grid aside { display:grid; gap:22px; } .quote-public-grid aside { position:sticky; top:110px; } .quote-item-list,.customer-record-list,.portal-notification-list,.portal-calendar-list { display:grid; margin-top:18px; } .quote-item-list article,.customer-record-list a { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 0; color:var(--ink); border-top:1px solid var(--line); text-decoration:none; } .quote-item-list article>div,.customer-record-list a>div,.customer-record-list a>span { display:grid; gap:4px; } .quote-item-list small,.customer-record-list small,.quote-date small { color:var(--muted); } .customer-record-list a>span { margin-left:auto; text-align:right; } .customer-record-list a:hover { color:var(--blue); } .quote-total-card>h2 { margin:7px 0 20px; font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-.06em; } .quote-subtotal,.quote-date { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid var(--line); } .quote-note { margin:18px 0 0; color:var(--muted); line-height:1.8; } .customer-portal-hero { padding:72px 0 44px; background:linear-gradient(135deg,rgba(31,116,255,.1),transparent 52%); } .customer-portal-hero .container { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; } .customer-portal-hero h1 { margin:10px 0; font-size:clamp(2.5rem,6vw,5.5rem); letter-spacing:-.07em; } .customer-portal-hero p { max-width:680px; margin:0; color:var(--muted); } .customer-portal-contact { display:grid; min-width:270px; gap:3px; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); } .customer-portal-contact i { margin-bottom:8px; color:var(--blue); font-size:1.4rem; } .customer-portal-contact small { color:var(--muted); } .customer-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:26px; } .customer-summary-grid-expanded { grid-template-columns:repeat(6,minmax(0,1fr)); } .customer-summary-grid article { display:grid; gap:5px; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .customer-summary-grid i { color:var(--blue); font-size:1.25rem; }.customer-summary-grid span { color:var(--muted); }.customer-summary-grid strong { font-size:1.8rem; } .customer-order-links{border-color:rgba(31,116,255,.25);background:linear-gradient(135deg,var(--surface),rgba(31,116,255,.045))}.customer-order-links .workspace-card-head>i{color:var(--blue)} .customer-server-history .workspace-card-head p,.customer-payment-history .workspace-card-head p{max-width:680px;margin:7px 0 0;color:var(--muted);font-size:.78rem;line-height:1.65}.portal-server-list{display:grid;gap:14px;margin-top:20px}.portal-server-card{overflow:hidden;border:1px solid var(--line);border-radius:21px;background:var(--soft)}.portal-server-card>header{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:17px 18px}.portal-server-card>header>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#1f74ff,#18366b)}.portal-server-card>header>div{display:grid;gap:2px;min-width:0}.portal-server-card>header small{color:var(--blue);font-size:.58rem;font-weight:900;letter-spacing:.12em}.portal-server-card>header h3{margin:0;font-size:1rem}.portal-server-card>header a{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.65rem}.portal-server-card>header>strong{padding:7px 10px;border-radius:999px;color:var(--blue);background:rgba(31,116,255,.09);font-size:.65rem}.portal-server-card.is-unassigned>header>span{background:linear-gradient(145deg,#7b8796,#3b4654)}.portal-server-order-list{display:grid;border-top:1px solid var(--line);background:var(--surface)}.portal-server-order-list>p{margin:0;padding:18px;color:var(--muted);font-size:.72rem}.portal-server-order-list>a{display:grid;grid-template-columns:minmax(155px,.62fr) minmax(0,1fr) auto;align-items:center;gap:15px;padding:15px 18px;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none;transition:.2s}.portal-server-order-list>a:last-child{border-bottom:0}.portal-server-order-list>a:hover{color:var(--blue);background:rgba(31,116,255,.045)}.portal-server-order-list>a>div{display:grid;gap:3px}.portal-server-order-list>a>div span{font-size:.66rem;font-weight:800}.portal-server-order-list>a>div strong{font-size:.72rem}.portal-server-order-list>a>div small{color:var(--muted);font-size:.6rem}.portal-server-order-list ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.portal-server-order-list li{padding:5px 7px;border-radius:8px;color:var(--muted);background:var(--soft);font-size:.58rem}.portal-empty-state{display:grid;justify-items:center;gap:8px;padding:30px;color:var(--muted);text-align:center}.portal-empty-state>i{font-size:1.5rem}.portal-empty-state p{margin:0;font-size:.72rem}.portal-payment-list{display:grid;margin-top:18px}.portal-payment-list>a{display:grid;grid-template-columns:48px minmax(0,1fr) auto 18px;align-items:center;gap:13px;padding:16px 0;color:var(--ink);border-top:1px solid var(--line);text-decoration:none}.portal-payment-icon{display:grid;place-items:center;width:48px;height:48px;padding:7px;border:1px solid var(--line);border-radius:14px;background:#fff}.portal-payment-icon img{max-width:100%;max-height:100%;object-fit:contain}.portal-payment-icon i{color:var(--blue);font-size:1.2rem}.portal-payment-list>a>div{display:grid;gap:3px}.portal-payment-list>a>div strong{font-size:.78rem}.portal-payment-list>a>div small,.portal-payment-list>a>div em{color:var(--muted);font-size:.62rem;font-style:normal}.portal-payment-list>a>span:nth-last-of-type(1){display:grid;gap:4px;text-align:right}.portal-payment-list>a>span:nth-last-of-type(1) strong{font-size:.85rem}.portal-payment-list>a>span:nth-last-of-type(1) small{color:var(--muted);font-size:.61rem}.portal-payment-list .is-paid{color:#168a51!important}.portal-payment-list .is-refunded{color:#d47614!important} .customer-completed-work .workspace-card-head p{max-width:680px;margin:7px 0 0;color:var(--muted);font-size:.78rem;line-height:1.65}.portal-completed-work-list{display:grid;margin-top:18px}.portal-completed-work-list>a{display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:13px;padding:15px 0;color:var(--ink);border-top:1px solid var(--line);text-decoration:none;transition:.2s}.portal-completed-work-list>a:hover{color:var(--blue)}.portal-work-check{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#18a363,#0f7548);box-shadow:0 9px 24px rgba(24,163,99,.18)}.portal-completed-work-list>a>div,.portal-completed-work-list>a>span:nth-last-of-type(1){display:grid;gap:3px}.portal-completed-work-list>a>div small{color:var(--blue);font-size:.58rem;font-weight:800;letter-spacing:.06em}.portal-completed-work-list>a>div strong{font-size:.82rem}.portal-completed-work-list em{color:var(--muted);font-size:.61rem;font-style:normal}.portal-completed-work-list>a>span:nth-last-of-type(1){text-align:right}.portal-completed-work-list>a>span:nth-last-of-type(1) strong{font-size:.8rem}.portal-completed-work-list>a>span:nth-last-of-type(1) small{color:var(--muted);font-size:.6rem}.portal-order-service-chips{display:flex!important;flex-wrap:wrap;gap:5px;margin-top:5px}.portal-order-service-chips em{padding:4px 7px;border-radius:7px;color:var(--muted);background:var(--soft);font-size:.56rem;font-style:normal}.portal-order-history>a>div{min-width:0} .portal-notification-list article { display:flex; gap:13px; padding:17px 0; border-top:1px solid var(--line); } .portal-notification-list i { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; color:var(--blue); background:rgba(31,116,255,.1); } .portal-notification-list p { margin:5px 0; color:var(--muted); line-height:1.5; }.portal-notification-list small { color:var(--muted); } .portal-calendar-list article { display:grid; gap:5px; padding:16px 0; border-top:1px solid var(--line); }.portal-calendar-list span,.portal-calendar-list small { color:var(--muted); } .public-calendar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .public-calendar-grid article { display:grid; min-height:150px; align-content:space-between; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); } .public-calendar-grid article span { color:var(--muted); }.public-calendar-grid article strong { font-size:1.25rem; } .public-calendar-grid .calendar-status-available { border-color:rgba(18,164,99,.4); background:rgba(18,164,99,.06); }.public-calendar-grid .calendar-status-deadline { border-color:rgba(245,0,70,.3); }.calendar-empty { grid-column:1/-1; text-align:center; } .reference-services{margin-top:26px;padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.06)}.reference-services p{margin:10px 0 0!important;font-size:.88rem!important;line-height:1.8!important}.reference-client-quote{max-width:900px;margin:0 auto 42px;padding:28px;border-left:4px solid var(--blue);border-radius:0 20px 20px 0;background:var(--surface);box-shadow:var(--shadow)}.reference-client-quote i{font-size:2rem;color:var(--blue)}.reference-client-quote p{margin:10px 0 0;font-size:1.12rem;line-height:1.8} .reference-detail-hero { padding:54px 0 80px; background:radial-gradient(circle at 80% 25%,rgba(31,116,255,.14),transparent 33%); } .reference-detail-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:50px; align-items:center; margin-top:48px; } .reference-detail-head h1 { margin:10px 0 18px; font-size:clamp(3rem,8vw,7.2rem); letter-spacing:-.08em; }.reference-detail-head p { max-width:700px; color:var(--muted); line-height:1.8; } .reference-logo-large { display:grid; place-items:center; min-height:330px; padding:42px; border:1px solid var(--line); border-radius:32px; background:var(--surface); box-shadow:var(--shadow); }.reference-logo-large img { max-width:100%; max-height:240px; object-fit:contain; } .reference-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }.reference-gallery figure { position:relative; overflow:hidden; margin:0; border:1px solid var(--line); border-radius:24px; background:var(--surface); }.reference-gallery img,.reference-gallery video { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }.reference-gallery .brand-watermark img{position:static!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}.reference-gallery figcaption { position:relative;z-index:5;padding:16px 20px;font-weight:700;background:var(--surface); } .customer-panel-link { display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:16px; color:var(--ink); border:1px solid var(--line); border-radius:18px; background:var(--soft); text-decoration:none; }.customer-panel-link>i:first-child { color:var(--blue); font-size:1.25rem; }.customer-panel-link span { display:grid; flex:1; }.customer-panel-link small { color:var(--muted); } html[data-theme="dark"] .pos-billing-fields,html[data-theme="dark"] .customer-panel-link { background:#111821; } @media(max-width:1199.98px){.customer-summary-grid-expanded{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:991.98px){.quote-public-grid,.customer-portal-grid,.reference-detail-head{grid-template-columns:1fr}.quote-public-grid aside{position:static}.customer-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-portal-hero .container{align-items:flex-start;flex-direction:column}.customer-portal-contact{width:100%}} @media(max-width:575.98px){.customer-summary-grid,.public-calendar-grid,.reference-gallery{grid-template-columns:1fr}.quote-item-list article,.customer-record-list a{align-items:flex-start;flex-direction:column}.customer-record-list a>span{margin-left:0;text-align:left}.portal-server-card>header{grid-template-columns:44px minmax(0,1fr)}.portal-server-card>header>span{width:44px;height:44px}.portal-server-card>header>strong{grid-column:2;justify-self:start}.portal-server-order-list>a{grid-template-columns:1fr auto}.portal-server-order-list>a>ul{grid-column:1/-1}.portal-payment-list>a{grid-template-columns:44px minmax(0,1fr) 18px}.portal-payment-icon{width:44px;height:44px}.portal-payment-list>a>span:nth-last-of-type(1){grid-column:2;text-align:left}.portal-payment-list>a>i{grid-column:3;grid-row:1/3}.portal-completed-work-list>a{grid-template-columns:40px minmax(0,1fr) 16px}.portal-completed-work-list>a>span:nth-last-of-type(1){grid-column:2;text-align:left}.portal-completed-work-list>a>i{grid-column:3;grid-row:1/3}.reference-logo-large{min-height:240px}.workspace-form.compact-form{gap:14px}} @media(max-width:575.98px){.bank-account-option{grid-template-columns:auto 44px minmax(0,1fr)}.bank-account-option>b{grid-column:2/-1}.bank-account-logo{width:44px}} /* Kişiye özel WhatsApp sipariş sayfası */ .quote-order-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 12%,rgba(31,116,255,.15),transparent 34%),linear-gradient(180deg,var(--surface),transparent)}.quote-order-hero:after{content:"";position:absolute;width:440px;height:440px;right:-180px;bottom:-330px;border:1px solid rgba(31,116,255,.17);border-radius:50%;box-shadow:0 0 0 70px rgba(31,116,255,.025)}.quote-order-hero .container{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.quote-order-hero h1{max-width:850px}.quote-order-trust{display:flex;align-items:center;gap:13px;min-width:235px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}.quote-order-trust>i{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;color:#118c4a;background:rgba(23,185,95,.1);font-size:1.2rem}.quote-order-trust span{display:grid}.quote-order-trust strong{font-size:.8rem}.quote-order-trust small{color:var(--muted);font-size:.68rem}.quote-order-card{padding:25px;border-radius:25px}.quote-order-items article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:19px 0}.quote-order-items article>div:nth-child(2){display:grid;gap:4px}.quote-item-icon{display:grid!important;place-items:center;width:43px;height:43px;border-radius:14px;color:var(--blue);background:rgba(31,116,255,.08)}.quote-order-assurances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.quote-order-assurances article{display:flex;gap:11px;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.quote-order-assurances i{color:var(--blue);font-size:1.05rem}.quote-order-assurances article>div{display:grid;gap:3px}.quote-order-assurances strong{font-size:.74rem}.quote-order-assurances small{color:var(--muted);font-size:.63rem;line-height:1.45}.quote-checkout-card{padding:25px;border-radius:25px;box-shadow:0 28px 75px rgba(15,28,56,.1)}.quote-checkout-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line)}.quote-checkout-heading>span{color:var(--blue);font-size:.67rem;font-weight:850;letter-spacing:.12em}.quote-checkout-heading small{color:var(--muted);font-size:.7rem}.quote-price-lines{display:grid;gap:8px;margin-top:17px}.quote-price-lines>div{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:.76rem}.quote-price-lines .is-discount{color:#128c4a}.quote-checkout-card>h2{margin:8px 0 19px;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.065em}.quote-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px}.quote-date-grid .quote-date{margin:0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.quote-date-grid .quote-date:last-child:nth-child(odd){grid-column:1/-1}.quote-payment-form{padding-top:18px;border-top:1px solid var(--line)}.quote-payment-form>label{gap:7px;font-size:.72rem;font-weight:800}.quote-payment-form .form-control,.quote-payment-form .form-select{min-height:46px;border-radius:13px}.quote-payment-form label>small{color:var(--muted);font-size:.63rem;font-weight:600;line-height:1.45}.quote-coupon-field{position:relative}.quote-coupon-field>i{position:absolute;z-index:1;left:14px;top:50%;transform:translateY(-50%);color:var(--blue)}.quote-coupon-field input{padding-left:41px;text-transform:uppercase;letter-spacing:.06em}.quote-personal-price-note{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid rgba(31,116,255,.2);border-radius:15px;background:rgba(31,116,255,.06)}.quote-personal-price-note>i{color:var(--blue)}.quote-personal-price-note span{display:grid;gap:2px}.quote-personal-price-note strong{font-size:.72rem}.quote-personal-price-note small{color:var(--muted);font-size:.62rem}.quote-bank-fields{display:grid;gap:8px;padding:14px;border:1px solid rgba(18,140,74,.18);border-radius:16px;background:rgba(18,140,74,.055)}.quote-bank-fields>small{color:#128c4a!important}.quote-create-order{display:flex;align-items:center;justify-content:space-between;min-height:51px;padding-inline:22px;font-weight:800}.quote-create-order i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#111;background:#fff}.quote-order-consent{display:flex;align-items:flex-start;gap:7px;color:var(--muted);font-size:.59rem;line-height:1.5}.quote-order-consent i{margin-top:1px;color:#128c4a} .quote-bank-fields{gap:13px;padding:16px}.quote-bank-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.quote-bank-title>div{display:grid;gap:3px}.quote-bank-title span{color:#128c4a;font-size:.58rem;font-weight:900;letter-spacing:.13em}.quote-bank-title strong{font-size:.83rem}.quote-bank-title>i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#128c4a;background:rgba(18,140,74,.1)}.quote-bank-account-list{display:grid;gap:10px}.quote-bank-account-card{position:relative;display:block;cursor:pointer}.quote-bank-account-card>input{position:absolute;opacity:0;pointer-events:none}.quote-bank-card-body{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--card);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.quote-bank-account-card:hover .quote-bank-card-body{border-color:rgba(18,140,74,.32);transform:translateY(-1px)}.quote-bank-account-card>input:checked+.quote-bank-card-body{border-color:#159451;box-shadow:0 0 0 3px rgba(18,140,74,.1)}.quote-bank-card-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px}.quote-bank-logo{display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.quote-bank-logo img{display:block;max-width:34px;max-height:26px;object-fit:contain}.quote-bank-logo img+i{display:none}.quote-bank-logo>i{color:#128c4a;font-size:1rem}.quote-bank-card-head>span:nth-child(2){display:grid;gap:2px}.quote-bank-card-head strong{font-size:.78rem}.quote-bank-card-head small{color:#128c4a;font-size:.6rem}.quote-bank-check{color:#159451;opacity:0;transform:scale(.7);transition:.2s ease}.quote-bank-account-card>input:checked+.quote-bank-card-body .quote-bank-check{opacity:1;transform:scale(1)}.quote-bank-detail{display:grid;gap:3px;padding-top:10px;border-top:1px solid var(--line)}.quote-bank-detail small,.quote-bank-payable small{color:var(--muted);font-size:.54rem;font-weight:900;letter-spacing:.1em}.quote-bank-detail strong{font-size:.73rem;line-height:1.5;overflow-wrap:anywhere}.quote-bank-iban{position:relative;padding-right:78px}.quote-bank-iban button{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:5px;border:0;border-radius:9px;padding:7px 9px;color:#128c4a;background:rgba(18,140,74,.1);font-size:.6rem;font-weight:800}.quote-bank-iban button.copied{color:#fff;background:#128c4a}.quote-bank-payable{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:12px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#102219,#158d50)}.quote-bank-payable small{color:rgba(255,255,255,.65)}.quote-bank-payable strong{font-size:1rem}.quote-bank-note{display:flex;align-items:flex-start;gap:7px;color:#128c4a!important;line-height:1.5} html[data-theme="dark"] .quote-order-trust{background:rgba(17,24,33,.78)}html[data-theme="dark"] .quote-bank-fields{background:rgba(18,140,74,.09)} html[data-theme="dark"] .quote-bank-card-body{background:#111821}html[data-theme="dark"] .quote-bank-logo{border-color:rgba(255,255,255,.12)} @media(max-width:991.98px){.quote-order-hero .container{align-items:flex-start;flex-direction:column}.quote-order-trust{min-width:0;width:100%}.quote-order-assurances{grid-template-columns:1fr}.quote-checkout-card{box-shadow:var(--shadow)}} @media(max-width:575.98px){.quote-order-card,.quote-checkout-card{padding:19px}.quote-order-items article{grid-template-columns:auto minmax(0,1fr);align-items:start}.quote-order-items article>strong{grid-column:2;margin-top:5px}.quote-date-grid{grid-template-columns:1fr}.quote-date-grid .quote-date:last-child:nth-child(odd){grid-column:auto}.quote-order-hero .container{gap:20px}.quote-bank-fields{margin-inline:-4px;padding:12px}.quote-bank-card-body{padding:12px}.quote-bank-iban{padding-right:0}.quote-bank-iban button{position:static;width:max-content;margin-top:6px}.quote-bank-payable{align-items:flex-start;flex-direction:column}.quote-bank-payable strong{font-size:1.12rem}} /* Personalized quote identity and bank account presentation */ .quote-personal-hero-copy{display:grid;gap:13px;max-width:900px} .quote-personal-hero-copy h1,.quote-personal-hero-copy p{margin:0} .quote-personal-hero-copy p{max-width:760px} .quote-personal-meta{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin-top:7px;padding:11px 14px 11px 11px;border:1px solid rgba(31,116,255,.18);border-radius:17px;background:rgba(255,255,255,.72);box-shadow:0 16px 38px rgba(15,28,56,.07);backdrop-filter:blur(14px)} .quote-personal-avatar,.quote-checkout-customer>b{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#1262e6,#4197ff);box-shadow:0 8px 22px rgba(31,116,255,.24);font-size:.76rem;font-weight:900;letter-spacing:.04em} .quote-personal-meta>span:not(.quote-personal-avatar){display:grid;gap:2px;min-width:0} .quote-personal-meta small,.quote-checkout-customer small{color:var(--muted);font-size:.54rem;font-weight:900;letter-spacing:.1em} .quote-personal-meta strong{font-size:.75rem;overflow-wrap:anywhere} .quote-personal-project{margin-left:4px;padding-left:16px;border-left:1px solid var(--line)} .quote-checkout-heading>div{display:grid;gap:3px} .quote-checkout-heading>div>span{color:var(--blue);font-size:.67rem;font-weight:850;letter-spacing:.12em} .quote-checkout-heading>div>small{font-size:.61rem} .quote-checkout-customer{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px 6px 6px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--soft);font-size:inherit;font-weight:inherit;letter-spacing:normal} .quote-checkout-customer>b{width:34px;height:34px;border-radius:10px;font-size:.62rem} .quote-checkout-customer>span{display:grid;gap:1px;min-width:0} .quote-checkout-customer strong{display:block;max-width:135px;overflow:hidden;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap} .quote-bank-fields{padding:18px;border-color:rgba(18,140,74,.22);border-radius:20px;background:linear-gradient(145deg,rgba(18,140,74,.075),rgba(18,140,74,.025))} .quote-bank-title>i{width:42px;height:42px;border-radius:13px} .quote-bank-card-body{gap:14px;padding:16px;border-radius:18px;box-shadow:0 12px 28px rgba(10,37,24,.045)} .quote-bank-account-card>input:checked+.quote-bank-card-body{box-shadow:0 0 0 3px rgba(18,140,74,.1),0 16px 32px rgba(10,62,35,.08)} .quote-bank-card-head{grid-template-columns:72px minmax(0,1fr) auto;gap:14px} .quote-bank-logo{width:72px;height:56px;padding:8px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(15,28,56,.02)} .quote-bank-logo img{width:100%;height:100%;max-width:58px;max-height:38px;object-fit:contain} .quote-bank-logo>i{font-size:1.25rem} .quote-bank-name{display:grid;gap:2px;min-width:0} .quote-bank-name>small{color:var(--muted);font-size:.5rem;font-weight:900;letter-spacing:.11em} .quote-bank-name>strong{font-size:.88rem;line-height:1.3;overflow-wrap:anywhere} .quote-bank-name>em{color:#128c4a;font-size:.61rem;font-style:normal;font-weight:750} .quote-bank-check{font-size:1.08rem} .quote-bank-information{display:grid;gap:9px} .quote-bank-detail{gap:5px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--soft)} .quote-bank-detail small,.quote-bank-payable small{font-size:.52rem} .quote-bank-detail strong{font-size:.76rem;line-height:1.45} .quote-bank-iban{padding-right:12px} .quote-bank-iban-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .quote-bank-iban-line>strong{min-width:0;color:var(--ink);font-size:.79rem;font-weight:850;letter-spacing:.045em;line-height:1.6;overflow-wrap:anywhere;word-break:break-word} .quote-bank-iban button{position:static;display:flex;align-items:center;gap:6px;flex:none;padding:8px 10px;border:0;border-radius:10px;color:#128c4a;background:rgba(18,140,74,.1);font-size:.6rem;font-weight:850} .quote-bank-payable{align-items:center;padding:14px 15px;border-radius:14px} .quote-bank-payable>span{display:grid;gap:2px} .quote-bank-payable em{color:rgba(255,255,255,.68);font-size:.58rem;font-style:normal} .quote-bank-payable strong{font-size:1.08rem;white-space:nowrap} html[data-theme="dark"] .quote-personal-meta{background:rgba(17,24,33,.78)} html[data-theme="dark"] .quote-checkout-customer,html[data-theme="dark"] .quote-bank-detail{background:#0d141d} @media(max-width:575.98px){.quote-personal-meta{align-items:flex-start;width:100%;flex-wrap:wrap}.quote-personal-project{width:100%;margin-left:55px;padding:8px 0 0;border-top:1px solid var(--line);border-left:0}.quote-checkout-heading{align-items:flex-start;flex-direction:column}.quote-checkout-customer{width:100%}.quote-checkout-customer strong{max-width:none}.quote-bank-card-head{grid-template-columns:62px minmax(0,1fr) auto;gap:10px}.quote-bank-logo{width:62px;height:52px}.quote-bank-logo img{max-width:50px;max-height:34px}.quote-bank-iban-line{align-items:flex-start;flex-direction:column}.quote-bank-iban button{width:100%;justify-content:center;margin-top:2px}.quote-bank-payable{align-items:flex-start}.quote-bank-payable strong{font-size:1.14rem}} .order-bank-box{gap:10px;padding:15px;border:1px solid rgba(18,140,74,.18);border-radius:19px;background:linear-gradient(145deg,rgba(18,140,74,.07),var(--surface))} .order-bank-head{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:13px;padding-bottom:12px;border-bottom:1px solid var(--line)} .order-bank-logo{display:grid;place-items:center;width:72px;height:54px;padding:8px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff} .order-bank-logo img{display:block;width:100%;height:100%;max-width:58px;max-height:36px;object-fit:contain} .order-bank-logo img+i{display:none} .order-bank-logo>i{color:#128c4a;font-size:1.2rem} /* Banka markaları ödeme kararında okunabilir kalmalı. */ .bank-account-logo{width:88px;height:60px;padding:7px;border:1px solid var(--line);border-radius:14px;background:#fff}.bank-account-logo img{width:100%;height:100%;padding:0;object-fit:contain}.quote-bank-card-head{grid-template-columns:88px minmax(0,1fr) auto}.quote-bank-logo{width:88px;height:64px;padding:7px}.quote-bank-logo img{max-width:74px;max-height:48px}.order-bank-head{grid-template-columns:96px minmax(0,1fr)}.order-bank-logo{width:96px;height:64px;padding:7px}.order-bank-logo img{max-width:82px;max-height:48px} @media(max-width:575.98px){.bank-account-logo{width:72px;height:54px}.quote-bank-card-head{grid-template-columns:76px minmax(0,1fr) auto}.quote-bank-logo{width:76px;height:58px}.quote-bank-logo img{max-width:64px;max-height:42px}.order-bank-head{grid-template-columns:76px minmax(0,1fr)}.order-bank-logo{width:76px;height:56px}} .order-bank-head>span:last-child{display:grid;gap:3px;min-width:0} .order-bank-head small,.order-bank-detail small,.order-bank-reference small{margin:0;color:var(--muted);font-size:.52rem;font-weight:900;letter-spacing:.1em} .order-bank-head strong{font-size:.88rem;overflow-wrap:anywhere} .order-bank-detail{display:grid;gap:5px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--soft)} .order-bank-detail>strong{font-size:.76rem;line-height:1.5;overflow-wrap:anywhere} .order-bank-iban>div{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0} .order-bank-iban>div>strong{min-width:0;font-size:.78rem;line-height:1.6;letter-spacing:.04em;overflow-wrap:anywhere;word-break:break-word} .order-bank-iban button{display:flex;align-items:center;gap:5px;flex:none;padding:8px 10px;border:0;border-radius:10px;color:#128c4a;background:rgba(18,140,74,.1);font-size:.6rem;font-weight:850} .order-bank-iban button.copied{color:#fff;background:#128c4a} .order-bank-reference{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#102219,#158d50)} .order-bank-reference>span{display:grid;gap:2px} .order-bank-reference small{color:rgba(255,255,255,.68)} .order-bank-reference em{color:rgba(255,255,255,.68);font-size:.56rem;font-style:normal} .order-bank-reference>strong{font-size:.83rem;letter-spacing:.03em;overflow-wrap:anywhere;text-align:right} html[data-theme="dark"] .order-bank-box{background:linear-gradient(145deg,rgba(18,140,74,.1),#111821)} html[data-theme="dark"] .order-bank-detail{background:#0d141d} @media(max-width:575.98px){.order-bank-head{grid-template-columns:62px minmax(0,1fr)}.order-bank-logo{width:62px;height:50px}.order-bank-iban>div{align-items:flex-start;flex-direction:column}.order-bank-iban button{width:100%;justify-content:center}.order-bank-reference{align-items:flex-start;flex-direction:column}.order-bank-reference>strong{text-align:left}} .quote-bank-jump{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid rgba(18,140,74,.2);border-radius:15px;color:var(--ink);background:rgba(18,140,74,.055);text-decoration:none;transition:.2s ease} .quote-bank-jump:hover{border-color:rgba(18,140,74,.42);color:var(--ink);transform:translateY(-1px)} .quote-bank-jump>i:first-child{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;color:#128c4a;background:rgba(18,140,74,.11)} .quote-bank-jump>span{display:grid;flex:1;gap:2px} .quote-bank-jump strong{font-size:.72rem} .quote-bank-jump small{color:var(--muted);font-size:.61rem;line-height:1.4} .quote-bank-jump>i:last-child{color:#128c4a} .quote-bank-section{scroll-margin-top:110px;margin-top:24px;padding:28px;border-radius:26px} .quote-bank-section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid rgba(18,140,74,.15)} .quote-bank-section-head>div{display:grid;gap:5px} .quote-bank-section-head span{color:#128c4a;font-size:.62rem;font-weight:900;letter-spacing:.13em} .quote-bank-section-head h2{margin:0;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.04em} .quote-bank-section-head p{max-width:720px;margin:0;color:var(--muted);font-size:.78rem;line-height:1.55} .quote-bank-section-head>i{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:18px;color:#128c4a;background:rgba(18,140,74,.1);font-size:1.25rem} .quote-bank-section .quote-bank-account-list{grid-template-columns:1fr;margin-top:3px} .quote-bank-section .quote-bank-card-body{grid-template-columns:minmax(220px,.72fr) minmax(360px,1.35fr) minmax(210px,.66fr);align-items:center;gap:18px;padding:18px 20px} .quote-bank-section .quote-bank-information{grid-template-columns:minmax(180px,.72fr) minmax(330px,1.28fr);gap:10px} .quote-bank-section .quote-bank-detail{min-height:72px;align-content:center} .quote-bank-section .quote-bank-payable{align-self:stretch;min-height:72px} .quote-bank-section .quote-bank-note{margin-top:2px} .quote-bank-section-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:2px;padding-top:17px;border-top:1px solid rgba(18,140,74,.15)} .quote-bank-section-footer .quote-bank-note{max-width:700px} .quote-bank-submit{display:flex;align-items:center;justify-content:space-between;gap:22px;min-width:245px;min-height:50px;padding-inline:20px;font-weight:800} .quote-bank-submit i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#111;background:#fff} html[data-theme="dark"] .quote-bank-jump{background:rgba(18,140,74,.08)} @media(max-width:1100px){.quote-bank-section .quote-bank-card-body{grid-template-columns:1fr}.quote-bank-section .quote-bank-information{grid-template-columns:repeat(2,minmax(0,1fr))}.quote-bank-section .quote-bank-payable{min-height:0}} @media(max-width:575.98px){.quote-bank-section{padding:18px;margin-top:18px}.quote-bank-section-head{align-items:flex-start}.quote-bank-section-head>i{width:46px;height:46px}.quote-bank-section .quote-bank-information{grid-template-columns:1fr}.quote-bank-section .quote-bank-card-body{padding:14px}.quote-bank-jump{align-items:flex-start}.quote-bank-section-footer{align-items:flex-start;flex-direction:column}.quote-bank-submit{width:100%;min-width:0}} /* About profile */ .about-profile-hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,132px) 0 78px;background:linear-gradient(180deg,var(--page-bg),var(--surface))} .about-profile-hero::before{content:"";position:absolute;top:-24%;right:-8%;width:min(52vw,780px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--fx-blue-rgb),.16),transparent 66%);pointer-events:none} .about-profile-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:clamp(46px,8vw,120px);align-items:center} .about-profile-copy h1{max-width:1020px;margin:18px 0 28px;font-size:clamp(3.2rem,7.2vw,7.5rem);font-weight:820;line-height:.92;letter-spacing:-.075em} .about-profile-lead{max-width:870px;margin:0;color:var(--muted);font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.85} .about-profile-actions{display:flex;align-items:center;gap:28px;margin-top:36px}.about-profile-actions .btn{padding:14px 22px}.about-profile-actions .text-link{display:inline-flex;align-items:center;gap:10px;font-weight:800} .about-profile-card{position:relative;isolation:isolate;overflow:hidden;min-height:580px;padding:34px;border:1px solid rgba(255,255,255,.1);border-radius:36px;color:#fff;background:linear-gradient(155deg,#111723 0%,#080b10 60%,#151018 100%);box-shadow:0 38px 90px rgba(7,10,17,.22)} .about-profile-card::after{content:"";position:absolute;inset:auto -22% -26% auto;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--fx-red-rgb),.38),transparent 68%);z-index:-1} .about-identity-card{background:radial-gradient(circle at 16% 12%,rgba(42,116,255,.24),transparent 34%),linear-gradient(155deg,#101722 0%,#080b10 58%,#170b14 100%)}.about-identity-top{display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.62);font-size:.66rem;font-weight:900;letter-spacing:.2em}.about-identity-top i{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.13);border-radius:15px;color:#8bb4ff;font-size:1.1rem;background:rgba(255,255,255,.04)}.about-identity-monogram{position:absolute;top:92px;left:28px;display:flex;align-items:center;color:rgba(255,255,255,.96);font-size:clamp(7rem,12vw,11rem);font-weight:850;line-height:.78;letter-spacing:-.14em}.about-identity-monogram span:last-child{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.23);transform:translateX(-8px)} .about-profile-card-copy{position:absolute;right:34px;bottom:34px;left:34px;z-index:2}.about-profile-card-copy>span{color:#79a8ff;font-size:.68rem;font-weight:900;letter-spacing:.16em}.about-profile-card-copy h2{max-width:390px;margin:10px 0 14px;font-size:clamp(2rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.06em}.about-profile-card-copy p{max-width:410px;margin:0;color:rgba(255,255,255,.66);line-height:1.7} .about-identity-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.about-identity-tags span{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.035);font-size:.58rem;font-weight:800;letter-spacing:.05em} .about-card-orbit{position:absolute;top:31%;right:-17%;width:72%;aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:50%;z-index:-1}.about-card-orbit::before,.about-card-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%}.about-card-orbit::before{inset:16%}.about-card-orbit::after{inset:36%} .about-story-section{background:var(--page-bg)}.about-story-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.7fr);gap:clamp(50px,10vw,150px);align-items:start}.about-story-heading h2{max-width:850px;margin:18px 0 0;font-size:clamp(2.7rem,5.6vw,6rem);font-weight:820;line-height:.96;letter-spacing:-.07em}.about-story-copy{display:grid;gap:20px;padding-top:34px}.about-story-copy p{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.9} .about-principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:72px}.about-principles-grid article{position:relative;overflow:hidden;min-height:310px;padding:30px;border:1px solid var(--line);border-radius:28px;background:var(--card-bg);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.about-principles-grid article:hover{transform:translateY(-6px);border-color:rgba(var(--fx-blue-rgb),.35);box-shadow:var(--fx-glow)}.about-principles-grid i{display:grid;place-items:center;width:50px;height:50px;margin-bottom:52px;border-radius:16px;color:var(--blue);background:rgba(var(--fx-blue-rgb),.1);font-size:1.25rem}.about-principles-grid span{color:var(--muted);font-size:.65rem;font-weight:900;letter-spacing:.14em}.about-principles-grid h3{margin:12px 0 14px;font-size:1.55rem;letter-spacing:-.04em}.about-principles-grid p{margin:0;color:var(--muted);line-height:1.7} .about-server-strip{color:#fff;background:#0b0e14}.about-server-strip .section-heading h2{max-width:820px}.about-server-strip .section-heading p{color:rgba(255,255,255,.54)}.about-server-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}.about-server-logo-grid a{display:grid;grid-template-rows:150px auto;gap:16px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.035);transition:.3s ease}.about-server-logo-grid a:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.065)}.about-server-logo-grid img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 24px rgba(0,0,0,.34))}.about-server-logo-grid span{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;font-weight:800}.about-server-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}.about-server-footer p{max-width:680px;margin:0;color:rgba(255,255,255,.56);line-height:1.7} html[data-theme="dark"] .about-profile-hero{background:linear-gradient(180deg,var(--page-bg),#10151d)}html[data-theme="dark"] .about-principles-grid article{background:#111720} .reference-latest-showcase{color:#fff;background:radial-gradient(circle at 75% 0,rgba(var(--fx-blue-rgb),.2),transparent 32%),#0b0e14}.reference-latest-showcase .references-heading{margin-bottom:42px}.reference-latest-showcase .references-heading p{color:rgba(255,255,255,.55)}.reference-latest-showcase .reference-current-grid{margin-bottom:0} @media(max-width:991.98px){.about-profile-grid,.about-story-grid{grid-template-columns:1fr}.about-profile-card{min-height:500px}.about-principles-grid{grid-template-columns:1fr 1fr}.about-server-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:575.98px){.about-profile-hero{padding-top:58px}.about-profile-copy h1{font-size:clamp(3rem,16vw,4.7rem)}.about-profile-actions,.about-server-footer{align-items:flex-start;flex-direction:column}.about-profile-card{min-height:440px;padding:24px;border-radius:28px}.about-profile-card-copy{right:24px;bottom:24px;left:24px}.about-principles-grid,.about-server-logo-grid{grid-template-columns:1fr}.about-principles-grid{margin-top:48px}.about-server-logo-grid a{grid-template-rows:130px auto}} /* Reference detail showcase */ .reference-detail-hero{position:relative;overflow:hidden;color:#fff;background-color:#090c12}.reference-detail-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 72%,rgba(9,12,18,.82))}.reference-detail-hero .container{position:relative;z-index:2}.reference-detail-head>div:first-child{max-width:800px}.reference-detail-head>div:first-child>p{color:rgba(255,255,255,.68)} .reference-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.reference-hero-links a{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#fff;background:rgba(255,255,255,.06);font-size:.72rem;font-weight:800;backdrop-filter:blur(12px);transition:.25s ease}.reference-hero-links a:hover{border-color:rgba(255,255,255,.4);background:#fff;color:#0b0e14;transform:translateY(-2px)}.reference-hero-links a i:last-child{margin-left:4px} .reference-work-section{background:var(--surface)}.reference-gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}.reference-gallery-heading h2{max-width:850px;margin:12px 0 0;font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:.98;letter-spacing:-.065em}.reference-gallery-heading>span{flex:none;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--card-bg);font-size:.68rem;font-weight:850} .reference-gallery{align-items:stretch;gap:20px}.reference-gallery figure{display:flex;align-self:stretch;min-width:0;flex-direction:column;border-color:rgba(14,21,32,.1);border-radius:20px;box-shadow:0 18px 50px rgba(12,18,28,.07)}.reference-gallery-open{display:block;width:100%;padding:0;border:0;color:#fff;background:#080b11;text-align:left;cursor:zoom-in}.reference-gallery-preview{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#080b11}.reference-gallery-preview>img,.reference-gallery-preview>video{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;background:#080b11;transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .35s ease}.reference-gallery-open:hover .reference-gallery-preview>img,.reference-gallery-open:hover .reference-gallery-preview>video{transform:scale(1.035);filter:brightness(.78)}.reference-gallery-open:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.reference-gallery-expand{position:absolute;z-index:7;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;background:rgba(7,10,15,.72);font-size:.64rem;font-weight:800;backdrop-filter:blur(12px);transform:translateY(5px);opacity:.84;transition:.25s ease}.reference-gallery-open:hover .reference-gallery-expand,.reference-gallery-open:focus-visible .reference-gallery-expand{opacity:1;transform:none}.reference-gallery figcaption{flex:1;border-top:1px solid var(--line);color:var(--text);font-size:.78rem} .reference-lightbox[hidden]{display:none!important}.reference-lightbox{position:fixed;z-index:13000;inset:0;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .25s ease}.reference-lightbox.is-open{opacity:1}.reference-lightbox-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(3,5,9,.91);backdrop-filter:blur(16px)}.reference-lightbox-dialog{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1500px,calc(100vw - 48px));height:min(900px,calc(100vh - 48px));overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:#080b10;box-shadow:0 45px 150px rgba(0,0,0,.72);transform:translateY(16px) scale(.985);transition:transform .3s cubic-bezier(.2,.75,.2,1)}.reference-lightbox.is-open .reference-lightbox-dialog{transform:none}.reference-lightbox-dialog>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:15px 17px 15px 22px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}.reference-lightbox-dialog>header>div:first-child{display:grid;min-width:0}.reference-lightbox-dialog>header span{color:#78a7ff;font-size:.56rem;font-weight:900;letter-spacing:.14em}.reference-lightbox-dialog>header strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.reference-lightbox-counter{color:rgba(255,255,255,.55);font-size:.67rem;font-weight:800}.reference-lightbox-dialog>header>button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;background:rgba(255,255,255,.05)}.reference-lightbox-stage{position:relative;display:grid;place-items:center;min-height:0;padding:20px;background:radial-gradient(circle at 50% 45%,#151b26,#05070a 72%)}.reference-lightbox-stage>img,.reference-lightbox-stage>video{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 18px 65px rgba(0,0,0,.35)}.reference-lightbox-stage>.brand-watermark{z-index:5!important}.reference-lightbox-nav{position:absolute;z-index:8;top:50%;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;background:rgba(7,10,15,.62);backdrop-filter:blur(10px);transform:translateY(-50%);transition:.2s ease}.reference-lightbox-nav:hover{color:#080b10;background:#fff}.reference-lightbox-nav.is-prev{left:22px}.reference-lightbox-nav.is-next{right:22px}body.reference-lightbox-open{overflow:hidden} .reference-external-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.7fr);gap:clamp(40px,8vw,110px);align-items:center;margin-top:70px;padding:clamp(32px,5vw,66px);border-radius:32px;color:#fff;background:radial-gradient(circle at 86% 12%,rgba(var(--fx-blue-rgb),.24),transparent 35%),#0b0e14}.reference-external-panel>div>span{color:#78a7ff;font-size:.66rem;font-weight:900;letter-spacing:.15em}.reference-external-panel h2{max-width:660px;margin:12px 0 17px;font-size:clamp(2.2rem,4.2vw,4.4rem);line-height:.98;letter-spacing:-.065em}.reference-external-panel p{max-width:670px;margin:0;color:rgba(255,255,255,.58);line-height:1.8}.reference-external-panel nav{display:grid;gap:9px}.reference-external-panel nav a{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;padding:11px 14px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(255,255,255,.04);transition:.25s ease}.reference-external-panel nav a:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);transform:translateX(4px)}.reference-external-panel nav a>i:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;background:rgba(255,255,255,.09)}.reference-external-panel nav span{font-size:.8rem;font-weight:800} html[data-theme="dark"] .reference-work-section{background:#0d1219}html[data-theme="dark"] .reference-gallery figure{border-color:rgba(255,255,255,.1)} @media(max-width:991.98px){.reference-external-panel{grid-template-columns:1fr}.reference-gallery-heading{align-items:flex-start;flex-direction:column}} @media(max-width:575.98px){.reference-hero-links a{width:100%;justify-content:flex-start}.reference-hero-links a i:last-child{margin-left:auto}.reference-external-panel{padding:26px 20px;border-radius:24px}.reference-gallery{gap:14px}.reference-gallery-expand b{display:none}.reference-gallery-expand{right:12px;bottom:12px}.reference-lightbox{padding:8px}.reference-lightbox-dialog{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:20px}.reference-lightbox-dialog>header{gap:10px;padding:11px 11px 11px 16px}.reference-lightbox-stage{padding:8px}.reference-lightbox-nav{top:auto;bottom:14px;width:44px;height:44px;transform:none}.reference-lightbox-nav.is-prev{left:14px}.reference-lightbox-nav.is-next{right:14px}} .reference-lightbox-stage{min-width:0;overflow:hidden}.reference-lightbox-stage>img,.reference-lightbox-stage>video{width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;object-fit:contain} /* Reference card readability */ .reference-current-copy{min-height:154px;color:#fff;background:linear-gradient(145deg,#111720,#090c12)} .reference-current-copy>span{color:#78a7ff} .reference-current-copy h3{color:#fff} .reference-current-copy p{color:rgba(255,255,255,.64)} main > section.reference-latest-showcase.section-space{color:#fff;background:radial-gradient(circle at 75% 0,rgba(var(--fx-blue-rgb),.2),transparent 32%),#0b0e14} /* Site announcements and campaign popup */ .site-announcement-bar{--announcement-accent:#73a9ff;position:relative;overflow:hidden;color:#fff;background:linear-gradient(110deg,#080b11 0%,#111a2b 48%,#090c12 100%);border-bottom:1px solid rgba(255,255,255,.08)} .site-announcement-bar::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);transform:translateX(-100%);animation:announcementSheen 7s ease-in-out infinite} .site-announcement-glow{position:absolute;top:-80px;left:12%;width:320px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(31,116,255,.32),transparent 68%);filter:blur(8px);animation:announcementGlow 8s ease-in-out infinite alternate} .site-announcement-bar-inner{position:relative;display:flex;align-items:center;gap:18px;height:50px;min-height:50px;padding-top:0;padding-bottom:0} .site-announcement-items{position:relative;align-self:stretch;flex:1;min-width:0;min-height:50px} .site-announcement-item{--item-accent:#73a9ff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;min-width:0;min-height:50px;line-height:1;opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .42s ease,visibility .42s ease,transform .42s cubic-bezier(.2,.75,.2,1)} .site-announcement-item.is-active{opacity:1;visibility:visible;transform:none} .site-announcement-item.theme-red{--item-accent:#ff668f}.site-announcement-item.theme-gold{--item-accent:#ffd46b}.site-announcement-item.theme-green{--item-accent:#63dda0}.site-announcement-item.theme-dark{--item-accent:#b8c2d3} .site-announcement-spark{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--item-accent) 42%,transparent);border-radius:10px;color:var(--item-accent);background:color-mix(in srgb,var(--item-accent) 12%,transparent)} .site-announcement-item>b{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:28px;padding:0 9px;border-radius:99px;color:#08101c;background:var(--item-accent);font-size:.55rem;font-weight:900;line-height:1;letter-spacing:.11em} .site-announcement-item>strong{display:inline-flex;align-items:center;overflow:hidden;max-width:34%;min-height:28px;font-size:.76rem;line-height:1.15;text-overflow:ellipsis;white-space:nowrap} .site-announcement-item>span:not(.site-announcement-spark){display:inline-flex;align-items:center;overflow:hidden;min-height:28px;color:rgba(255,255,255,.66);font-size:.68rem;line-height:1.15;text-overflow:ellipsis;white-space:nowrap} .site-announcement-item>a{display:inline-flex;align-items:center;gap:6px;flex:none;color:#fff;font-size:.66rem;font-weight:850;border-bottom:1px solid rgba(255,255,255,.34)} .site-announcement-code{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 9px;border:1px dashed color-mix(in srgb,var(--item-accent) 52%,transparent);border-radius:9px;color:#fff;background:color-mix(in srgb,var(--item-accent) 10%,transparent);font-size:.61rem;font-weight:900;letter-spacing:.08em;transition:.2s ease} .site-announcement-code:hover,.site-announcement-code.is-copied{border-style:solid;color:#07101b;background:var(--item-accent)} .site-announcement-count{display:flex;align-items:baseline;gap:2px;flex:none;color:rgba(255,255,255,.38);font-size:.55rem}.site-announcement-count b{color:#fff;font-size:.68rem} .site-announcement-close{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#fff;background:rgba(255,255,255,.045);font-size:.72rem;transition:.2s ease}.site-announcement-close:hover{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.12);transform:rotate(6deg)} .site-announcement-bar.is-dismissed{display:none} @keyframes announcementSheen{0%,66%{transform:translateX(-100%)}88%,100%{transform:translateX(100%)}} @keyframes announcementGlow{from{transform:translateX(-24px) scale(.9);opacity:.68}to{transform:translateX(42vw) scale(1.16);opacity:.95}} .site-campaign-popup[hidden]{display:none!important} .site-campaign-popup{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .28s ease} .site-campaign-popup.is-open{opacity:1}.site-campaign-popup.is-closing{opacity:0} .site-campaign-backdrop{position:absolute;inset:0;border:0;background:rgba(4,7,13,.76);backdrop-filter:blur(14px)} .site-campaign-dialog{--campaign-accent:#4e95ff;position:relative;display:grid;grid-template-columns:minmax(280px,.86fr) minmax(360px,1fr);width:min(980px,calc(100vw - 48px));max-height:min(720px,calc(100vh - 48px));overflow:auto;border:1px solid rgba(255,255,255,.15);border-radius:34px;color:#fff;background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--campaign-accent) 26%,transparent),transparent 38%),linear-gradient(145deg,#111824,#070a10 64%);box-shadow:0 45px 130px rgba(0,0,0,.55);transform:translateY(24px) scale(.975);transition:transform .42s cubic-bezier(.2,.75,.2,1)} .site-campaign-popup.is-open .site-campaign-dialog{transform:none}.site-campaign-dialog.theme-red{--campaign-accent:#f50046}.site-campaign-dialog.theme-gold{--campaign-accent:#f0b929}.site-campaign-dialog.theme-green{--campaign-accent:#22ad68}.site-campaign-dialog.theme-dark{--campaign-accent:#65748a} .site-campaign-close{position:absolute;z-index:4;top:18px;right:18px;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;background:rgba(7,10,16,.56);backdrop-filter:blur(10px);transition:.25s ease}.site-campaign-close:hover{background:#fff;color:#0a0d12;transform:rotate(7deg)} .site-campaign-visual{position:relative;min-height:520px;overflow:hidden;background:#0b0f16}.site-campaign-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,#0b0f16),linear-gradient(0deg,rgba(5,8,13,.55),transparent 55%)}.site-campaign-visual img{width:100%;height:100%;object-fit:cover} .site-campaign-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(40px,6vw,76px)}.site-campaign-dialog:not(:has(.site-campaign-visual)){grid-template-columns:1fr;width:min(720px,calc(100vw - 48px))}.site-campaign-dialog:not(:has(.site-campaign-visual)) .site-campaign-copy{min-height:470px} .site-campaign-label{display:inline-flex;align-items:center;gap:8px;color:#9ec1ff;font-size:.61rem;font-weight:900;letter-spacing:.17em}.site-campaign-label i{font-size:.9rem}.site-campaign-copy h2{max-width:640px;margin:16px 0 20px;font-size:clamp(2.3rem,4.7vw,4.7rem);font-weight:820;line-height:.94;letter-spacing:-.065em}.site-campaign-copy p{max-width:600px;margin:0;color:rgba(255,255,255,.63);font-size:.96rem;line-height:1.75} .site-campaign-code{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;margin-top:28px;padding:14px 15px 14px 18px;border:1px dashed color-mix(in srgb,var(--campaign-accent) 48%,transparent);border-radius:17px;color:#fff;background:color-mix(in srgb,var(--campaign-accent) 10%,transparent);text-align:left;transition:.25s ease}.site-campaign-code:hover,.site-campaign-code.is-copied{border-style:solid;background:color-mix(in srgb,var(--campaign-accent) 18%,transparent);transform:translateY(-2px)}.site-campaign-code>span{display:grid;gap:3px}.site-campaign-code small{color:rgba(255,255,255,.48);font-size:.52rem;font-weight:900;letter-spacing:.13em}.site-campaign-code strong{font-size:1.14rem;letter-spacing:.11em}.site-campaign-code>b{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:11px;color:#07101a;background:#fff;font-size:.64rem} .site-campaign-actions{display:flex;align-items:center;gap:18px;margin-top:30px}.site-campaign-actions .btn{padding:13px 20px;font-size:.78rem;font-weight:850}.site-campaign-dismiss{border:0;color:rgba(255,255,255,.58);background:none;font-size:.72rem;font-weight:750}.site-campaign-dismiss:hover{color:#fff} body.site-campaign-open{overflow:hidden} @media(max-width:767.98px){.site-announcement-bar-inner{height:52px;min-height:52px;padding-right:14px;padding-left:14px}.site-announcement-items,.site-announcement-item{min-height:52px}.site-announcement-item{justify-content:flex-start;gap:8px;padding-right:4px}.site-announcement-item>span:not(.site-announcement-spark){display:none}.site-announcement-item>strong{max-width:none;flex:1;font-size:.68rem}.site-announcement-item>b{display:none}.site-announcement-item>a{display:none}.site-announcement-spark{width:26px;height:26px}.site-announcement-code{padding:6px}.site-announcement-code>i:first-child{display:none}.site-announcement-count{display:none}.site-campaign-popup{padding:12px}.site-campaign-dialog{grid-template-columns:1fr;width:calc(100vw - 24px);max-height:calc(100vh - 24px);border-radius:25px}.site-campaign-visual{min-height:220px;max-height:32vh}.site-campaign-visual::after{background:linear-gradient(0deg,#0b0f16,transparent 72%)}.site-campaign-copy{padding:30px 22px 26px}.site-campaign-copy h2{font-size:clamp(2.1rem,10vw,3.3rem)}.site-campaign-dialog:not(:has(.site-campaign-visual)) .site-campaign-copy{min-height:430px}.site-campaign-actions{align-items:stretch;flex-direction:column;width:100%;gap:12px}.site-campaign-actions .btn,.site-campaign-dismiss{width:100%;text-align:center}.site-campaign-code{gap:12px}} @media(prefers-reduced-motion:reduce){.site-announcement-bar::before,.site-announcement-glow{animation:none}.site-announcement-item,.site-campaign-popup,.site-campaign-dialog{transition:none}} .hero-content .hero-slide-title{max-width:760px;margin:0;font-size:clamp(3rem,5.2vw,5.5rem);font-weight:800;line-height:.95;letter-spacing:-.07em} .home-faq-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(37,113,255,.035),transparent)} .home-faq-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(36px,7vw,110px);align-items:start} .home-faq-heading{position:sticky;top:150px} .home-faq-heading h2{max-width:620px;margin:16px 0 18px;font-size:clamp(34px,4.4vw,66px);line-height:.98;letter-spacing:-.055em} .home-faq-heading p{max-width:520px;margin:0 0 26px;color:var(--muted);font-size:17px;line-height:1.75} .home-faq-list{border-top:1px solid var(--line)} .home-faq-list details{border-bottom:1px solid var(--line);transition:background .25s ease} .home-faq-list details[open]{background:linear-gradient(90deg,rgba(37,113,255,.07),transparent)} .home-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 18px;cursor:pointer;list-style:none;font-size:18px;font-weight:750;line-height:1.4} .home-faq-list summary::-webkit-details-marker{display:none} .home-faq-list summary i{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;flex:none;color:var(--primary);transition:transform .25s ease,background .25s ease} .home-faq-list details[open] summary i{transform:rotate(45deg);background:var(--primary);color:#fff;border-color:var(--primary)} .home-faq-list details p{margin:0;padding:0 76px 26px 18px;color:var(--muted);line-height:1.75} .reference-related-services{margin-top:clamp(55px,8vw,100px)} @media(max-width:991.98px){.home-faq-layout{grid-template-columns:1fr;gap:28px}.home-faq-heading{position:static}.home-faq-heading h2{font-size:clamp(34px,9vw,52px)}.home-faq-list summary{padding-inline:4px}.home-faq-list details p{padding-left:4px;padding-right:48px}} @media(max-width:767.98px){.hero-content .hero-slide-title{font-size:clamp(2.6rem,12vw,4.2rem)}}