@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080b12;--panel:#101621;--panel2:#141d2b;--line:rgba(178,198,225,.13);--text:#f4f7fc;--muted:#9aa7ba;--blue:#6ba7ff;--blue2:#4389f5;--violet:#9b8cff;--gold:#f0c77a;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.55;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}.ambient{position:absolute;z-index:-1;pointer-events:none;filter:blur(1px)}.ambient-a{top:-220px;left:-180px;width:650px;height:620px;background:radial-gradient(ellipse,rgba(33,99,178,.3),transparent 68%)}.ambient-b{top:600px;right:-300px;width:600px;height:650px;background:radial-gradient(ellipse,rgba(103,69,190,.13),transparent 70%)}
.nav{height:76px;margin-top:18px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:rgba(13,19,30,.82);backdrop-filter:blur(18px);border-radius:20px;position:relative;z-index:3}.brand{display:inline-flex;align-items:center;gap:10px;font:800 19px Manrope,sans-serif;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#061120;background:linear-gradient(145deg,#9dcaff,#448eff);font-size:20px}.brand-tag{font:700 9px 'DM Sans';letter-spacing:1.2px;color:#73839b;border-left:1px solid var(--line);padding-left:10px;margin-left:4px}.nav nav{display:flex;gap:28px;color:#aeb8c8;font-size:13px;font-weight:600}.nav nav a:hover,.footer a:hover{color:white}.nav-cta{border:1px solid rgba(117,169,255,.25);background:rgba(74,134,235,.13);padding:11px 15px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap}.nav-cta span{color:var(--blue);margin-left:10px}.menu-toggle{display:none;background:none;color:white;border:0;font-size:22px}
.hero{text-align:center;padding:94px 0 52px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2px;font-weight:800;color:#8ca6ca}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(20,31,48,.7)}.live-dot{width:7px;height:7px;background:#73d6b0;border-radius:50%;box-shadow:0 0 12px #73d6b077}.hero h1,.section-intro h2,.album-header h1{font:800 clamp(46px,7.5vw,82px)/1.04 Manrope,sans-serif;letter-spacing:-4px;margin:25px 0 22px}.hero h1 span,.section-intro h2 span{color:transparent;background:linear-gradient(100deg,#83b8ff 5%,#c3b4ff 92%);background-clip:text;-webkit-background-clip:text}.hero-copy{max-width:560px;margin:0 auto;color:#a8b4c6;font-size:17px;line-height:1.75}.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 19px;border:1px solid transparent;border-radius:13px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}.button:hover{transform:translateY(-2px)}.button.primary{color:#06101f;background:linear-gradient(135deg,#9bc6ff,#619cff);box-shadow:0 9px 30px #4189ff24}.button.primary:hover{background:linear-gradient(135deg,#b3d5ff,#7eafff)}.button.ghost{border-color:var(--line);background:#ffffff05;color:#d8e0ee}.button.ghost:hover{background:#ffffff0b;border-color:#ffffff2b}.trust-line{display:flex;gap:23px;justify-content:center;flex-wrap:wrap;margin-top:29px;color:#8998ad;font-size:11px}.trust-line span::first-letter{color:#7ed5b0}
.upload-section{max-width:820px;padding:16px 0 106px}.upload-card{padding:30px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(20,28,42,.97),rgba(12,17,26,.96));box-shadow:0 25px 80px #0004}.upload-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.upload-card h2{font:750 23px Manrope,sans-serif;letter-spacing:-.8px;margin:7px 0 0}.secure-pill{font-size:10px;color:#a7c5b7;border:1px solid #5fc6a326;background:#5fc6a30c;border-radius:99px;padding:7px 10px;white-space:nowrap}.secure-pill span{color:#6dd6aa;margin-right:5px}.field-label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:#d8e1ef}.field-label span{font-weight:400;color:#7f8da2;margin-left:6px}#albumTitle{width:100%;height:48px;padding:0 14px;color:#edf3fc;background:#090e17;border:1px solid var(--line);border-radius:12px;outline:none;margin-bottom:16px}#albumTitle:focus{border-color:#609bfa;box-shadow:0 0 0 3px #609bfa19}.dropzone{min-height:235px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #526987;border-radius:19px;background:radial-gradient(ellipse at center,#23355050,transparent 72%),#0a101a;cursor:pointer;transition:.2s;padding:25px;text-align:center;outline:none}.dropzone:hover,.dropzone.dragging,.dropzone:focus-visible{border-color:#81b5ff;background-color:#121e30}.upload-symbol{width:53px;height:53px;border-radius:16px;background:#3d83ee18;color:#7db3ff;display:grid;place-items:center;margin-bottom:14px}.upload-symbol svg{width:27px;height:27px}.dropzone strong{font:750 16px Manrope,sans-serif}.dropzone>span{color:#a9b6c9;font-size:12px;margin-top:5px}.dropzone>span b{color:#87b6ff}.dropzone small{color:#718097;font-size:10px;margin-top:16px}.selected-files{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#090e17}.selected-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:8px}.text-button{border:0;background:none;color:#8eb9ff;font-size:11px;cursor:pointer}.file-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid #ffffff0a}.file-type{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#22314a;color:#a7caff;font-size:8px;font-weight:800}.file-meta{min-width:0;display:flex;flex:1;flex-direction:column}.file-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta small{color:#8190a6;font-size:10px}.remove-file{border:0;background:none;color:#8190a6;font-size:20px;cursor:pointer}.upload-submit{width:100%;margin-top:17px;justify-content:space-between;padding:16px 19px}.upload-submit:disabled{opacity:.45;cursor:not-allowed;transform:none}.status{font-size:12px;margin-top:10px;color:#9eacc0}.status:empty{display:none}.status.error,.upload-errors{color:#ff9c9c}.status.success{color:#83e0b5}.status.warning{color:#f0c77a}.progress-wrap{margin-top:16px}.progress-label{display:flex;justify-content:space-between;color:#a9b6c8;font-size:11px;margin-bottom:7px}.progress-track{height:5px;background:#ffffff12;border-radius:9px;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#619cff,#a99aff);border-radius:9px;transition:width .2s}.result-panel{margin-top:18px;padding:22px;border-radius:17px;border:1px solid #76b2ff33;background:#132033;text-align:center}.result-check{display:grid;place-items:center;margin:0 auto 10px;width:40px;height:40px;border-radius:50%;background:#72d9ac20;color:#72d9ac;font-size:23px}.result-panel h3{font:750 19px Manrope;margin:0}.result-panel>p{font-size:12px;color:#a6b4c7;margin:5px 0 15px}.upload-errors{text-align:left;font-size:11px}.share-link-row{display:flex;gap:8px}.share-link-row input{flex:1;min-width:0;color:#dce8fa;background:#090e17;border:1px solid var(--line);border-radius:10px;padding:11px;font-size:11px}.share-link-row .button{padding:10px 13px;font-size:11px}.result-open{margin-top:10px;width:100%}.side-note{display:flex;align-items:center;gap:14px;margin-top:14px;padding:17px 20px;border:1px solid #e9bf7030;border-radius:16px;background:linear-gradient(100deg,#d7a64e12,transparent)}.spark{color:#edc476;font-size:23px}.side-note span:nth-child(2){display:flex;flex-direction:column;flex:1}.side-note b{font-size:12px}.side-note small{font-size:11px;color:#909caf;margin-top:2px}.side-note-arrow{color:#e5bb6c}
.feature-section{padding:25px 0 110px}.section-intro{max-width:550px}.section-intro h2{font-size:49px;letter-spacing:-2.5px;margin:14px 0}.section-intro>p{color:#99a7bb;max-width:450px;font-size:14px}.feature-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:15px;margin-top:37px}.feature-card{min-height:300px;padding:24px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,#151d2a,#0d121b);position:relative;overflow:hidden}.feature-large{background:radial-gradient(ellipse at 15% 100%,#2866a42b,transparent 60%),linear-gradient(145deg,#172437,#0d121b)}.feature-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:22px;margin-bottom:23px}.feature-icon.blue{background:#4c91ff20;color:#85b9ff}.feature-icon.violet{background:#a18aff20;color:#b5a6ff}.feature-icon.gold{background:#e6b95b1c;color:#eac778}.feature-number{font-size:9px;font-weight:800;letter-spacing:1.7px;color:#6f8098}.feature-card h3{font:750 22px/1.28 Manrope;letter-spacing:-.7px;margin:12px 0}.feature-card p{color:#96a4b8;font-size:12px;line-height:1.8}.link-preview{display:flex;align-items:center;gap:8px;margin-top:22px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#090e17;color:#8999b0;font-size:9px;white-space:nowrap}.link-preview span:last-child{margin-left:auto;color:#8cbaff}.link-dot{width:6px;height:6px;border-radius:50%;background:#6cd9aa}.mini-photo-row{display:flex;align-items:center;margin-top:24px}.mini-photo{width:46px;height:46px;border-radius:11px;border:2px solid #111722;margin-right:-8px}.p1{background:linear-gradient(140deg,#7fb5c4,#253f59)}.p2{background:linear-gradient(140deg,#d6ad84,#5e3f49)}.p3{background:linear-gradient(140deg,#8e9fc9,#34344f)}.mini-photo-row span{font-size:9px;color:#94a5bd;font-weight:800;margin-left:19px}.zip-illustration{display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#090e17}.zip-illustration>span:first-child{display:grid;place-items:center;width:36px;height:39px;background:#e4b95c1c;color:#e7c578;border-radius:8px;font-size:10px;font-weight:800}.zip-illustration div{display:flex;flex:1;flex-direction:column}.zip-illustration b{font-size:10px}.zip-illustration small{font-size:9px;color:#8290a5}.zip-check{color:#7edab3}
.how-section{border-block:1px solid var(--line);background:linear-gradient(90deg,#111a280a,#15223888,#111a280a);padding:86px 0}.how-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.how-inner .section-intro h2{font-size:44px}.steps{border-top:1px solid var(--line)}.step{display:flex;gap:22px;padding:21px 0;border-bottom:1px solid var(--line)}.step>span{font:800 12px Manrope;color:#7faeff;padding-top:3px}.step h3{font:750 15px Manrope;margin:0 0 6px}.step p{font-size:12px;color:#97a5b9;margin:0;line-height:1.8}
.faq-section{padding:100px 0 110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}.faq-section .section-intro h2{font-size:43px}.faq-list details{border-bottom:1px solid var(--line);padding:17px 0}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:#8cb7ff;font-size:20px;font-weight:400;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{color:#97a5b9;font-size:12px;line-height:1.8;max-width:560px}.footer{border-top:1px solid var(--line);padding:24px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8290a5;font-size:11px}.footer .brand{color:#e6edf8;font-size:16px}.footer .brand-mark{width:28px;height:28px;font-size:16px;border-radius:9px}
.album-main{padding:35px 0 90px;min-height:65vh}.back-link{font-size:12px;color:#93a3ba}.album-header{padding:36px 0 18px}.album-header h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2.5px;margin:9px 0}.album-header p{color:#98a7bb;margin:0}.album-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;color:#9aa9bd}.album-toolbar>div{display:flex;gap:8px}.button.small{padding:10px 13px;font-size:11px;gap:8px}.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:22px}.album-photo{min-width:0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#111824;transition:transform .2s,border-color .2s}.album-photo:hover{transform:translateY(-3px);border-color:#5f8dcc}.album-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#080b12}.photo-caption{display:flex;justify-content:space-between;gap:10px;padding:11px 12px}.photo-caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.photo-caption small{white-space:nowrap;font-size:10px;color:#8392a8}.empty-state{text-align:center;padding:80px 15px}.empty-art{font-size:45px;color:#7baeff}.empty-state h2{font:750 24px Manrope}.empty-state p{font-size:13px;color:#97a5b9;margin-bottom:22px}.disabled{opacity:.4;pointer-events:none}
@media(max-width:800px){.nav nav{gap:15px}.brand-tag{display:none}.hero{padding-top:74px}.feature-grid{grid-template-columns:1fr 1fr}.feature-large{grid-column:span 2;min-height:260px}.how-inner{gap:35px}.faq-section{gap:30px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{width:min(100% - 28px,1120px)}.nav{height:64px;margin-top:10px;padding:0 12px;border-radius:16px}.brand{font-size:17px}.nav-cta{padding:9px 10px;font-size:10px}.nav-cta span{margin-left:4px}.nav nav{display:none;position:absolute;top:72px;left:0;right:0;padding:17px;background:#111a29;border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:14px}.nav nav.nav-open{display:flex}.menu-toggle{display:block}.hero{padding:64px 0 36px}.hero h1{font-size:clamp(43px,13vw,63px);letter-spacing:-2.8px;margin:22px 0 17px}.hero-copy{font-size:14px}.hero-actions{gap:8px}.button{padding:13px 14px;font-size:11px;gap:10px}.trust-line{gap:9px 14px;font-size:10px}.upload-section{padding-bottom:72px}.upload-card{padding:17px;border-radius:21px}.upload-card-head{align-items:flex-start;flex-direction:column;gap:10px}.upload-card h2{font-size:20px}.dropzone{min-height:205px;padding:18px}.dropzone strong{font-size:14px}.dropzone small{line-height:1.7}.side-note{padding:14px;gap:10px}.side-note small{font-size:10px}.feature-section{padding-bottom:75px}.section-intro h2{font-size:39px;letter-spacing:-1.8px}.feature-grid{grid-template-columns:1fr;gap:12px;margin-top:26px}.feature-large{grid-column:auto}.feature-card{min-height:0;padding:22px}.feature-card p{max-width:430px}.how-section{padding:65px 0}.how-inner{grid-template-columns:1fr;gap:25px}.how-inner .section-intro h2,.faq-section .section-intro h2{font-size:37px}.faq-section{padding:70px 0;grid-template-columns:1fr;gap:24px}.footer{flex-wrap:wrap}.footer>span{order:3;width:100%}.album-main{padding-top:25px}.album-toolbar{align-items:flex-start;flex-direction:column}.album-toolbar>div{width:100%}.album-toolbar .button{flex:1}.album-grid{grid-template-columns:1fr;gap:12px}.album-photo img{aspect-ratio:4/3}.share-link-row{flex-direction:column}.share-link-row .button{width:100%}}

/* Quality-of-life refinements */
:focus-visible{outline:2px solid #8dbaff;outline-offset:3px}
.file-thumb{width:42px;height:42px;flex:0 0 42px;overflow:hidden;display:grid;place-items:center;border-radius:9px;background:#202d40;color:#a7caff;font-size:9px;font-weight:800}
.file-thumb img{width:100%;height:100%;object-fit:cover}
.text-button:disabled,.remove-file:disabled{opacity:.45;cursor:not-allowed}
.album-photo img{transition:opacity .2s}
.album-photo img:not([src]){opacity:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}





/* PngVault visual refresh: hero + upload experience */
:root{--bg:#070a11;--panel:#0e1522;--line:rgba(159,185,224,.17);--blue:#83b5ff;--radius:26px}
body{background:radial-gradient(ellipse at 50% 0%,rgba(44,91,164,.16),transparent 38%),#070a11}
.ambient-a{top:-180px;left:calc(50% - 520px);width:700px;height:580px;background:radial-gradient(ellipse,rgba(49,113,216,.22),transparent 68%)}
.ambient-b{top:500px;right:-250px;width:650px;height:700px;background:radial-gradient(ellipse,rgba(118,80,220,.12),transparent 70%)}
.nav{margin-top:16px;border-radius:18px;background:rgba(12,18,29,.78);border-color:rgba(164,190,230,.15);box-shadow:0 12px 44px #0002}
.brand-mark{box-shadow:0 5px 22px #5d9fff35}
.nav-cta{transition:.2s}.nav-cta:hover{background:rgba(74,134,235,.24);border-color:#75a9ff77;transform:translateY(-1px)}
.hero{padding:86px 0 44px}
.eyebrow{padding:8px 15px;background:linear-gradient(110deg,rgba(27,45,72,.9),rgba(19,25,42,.72));border-color:rgba(127,172,240,.24);box-shadow:0 6px 30px #0002}
.hero h1{font-size:clamp(54px,8vw,88px);letter-spacing:-5px;line-height:.99;margin:26px 0 20px;text-shadow:0 5px 40px #0002}
.hero h1 span{background-image:linear-gradient(100deg,#75b5ff 0%,#9baaff 52%,#c3a5ff 100%)}
.hero-copy{max-width:590px;font-size:16px;color:#b4c0d2;line-height:1.8}
.hero-actions{margin-top:30px;gap:13px}
.button{border-radius:14px;padding:15px 21px;transition:transform .2s,box-shadow .2s,background .2s}
.button.primary{background:linear-gradient(115deg,#a4ceff,#73a8ff 56%,#6596f5);box-shadow:0 9px 28px #4389f53b,inset 0 1px #ffffff8c}
.button.primary:hover{box-shadow:0 12px 34px #4389f55c;transform:translateY(-2px)}
.button.ghost{background:rgba(16,23,36,.75);border-color:rgba(166,190,225,.2)}
.trust-line{margin-top:25px;gap:20px;color:#9aaac1;font-size:11px}
.upload-section{max-width:820px;padding:22px 0 100px}
.upload-card{position:relative;isolation:isolate;padding:clamp(22px,4vw,34px);border-radius:28px;border:1px solid rgba(145,178,229,.23);background:linear-gradient(145deg,rgba(18,28,44,.98),rgba(10,15,25,.98));box-shadow:0 28px 85px #0005,0 1px 0 #ffffff08 inset}
.upload-card:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(128,180,255,.24),transparent 38%,rgba(157,135,255,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.upload-card-head{margin-bottom:25px}
.section-kicker{color:#8dbaff;letter-spacing:2.2px}
.upload-card h2{font-size:clamp(22px,3vw,27px);letter-spacing:-1px;margin-top:8px}
.secure-pill{padding:8px 11px;background:rgba(73,202,151,.07);border-color:rgba(94,216,171,.22)}
.field-label{font-size:12px;margin-bottom:9px}
#albumTitle{height:52px;border-radius:13px;background:#080d16;border-color:rgba(154,181,221,.17);padding:0 16px;transition:border-color .2s,box-shadow .2s}
#albumTitle:focus{border-color:#76adff;box-shadow:0 0 0 4px #609bfa20}
.dropzone{min-height:230px;border:1px dashed rgba(123,166,226,.53);border-radius:20px;background:radial-gradient(ellipse at 50% 35%,rgba(48,94,155,.18),transparent 65%),linear-gradient(145deg,#0b1320,#090f19);padding:30px 20px;position:relative;overflow:hidden}
.dropzone:before{content:"";position:absolute;inset:10px;border:1px solid rgba(160,190,235,.035);border-radius:13px;pointer-events:none}
.dropzone:hover,.dropzone.dragging,.dropzone:focus-visible{border-color:#94c0ff;background:radial-gradient(ellipse at 50% 35%,rgba(66,126,205,.25),transparent 65%),#0c1727;box-shadow:inset 0 0 35px #5595f50b,0 0 0 3px #609bfa12}
.upload-symbol{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#1b3456,#13233c);border:1px solid rgba(125,176,255,.18);box-shadow:0 8px 26px #0003;color:#8fc0ff;margin-bottom:16px}
.upload-symbol svg{width:28px;height:28px}
.dropzone strong{font-size:17px;letter-spacing:-.35px}
.dropzone>span{font-size:13px;margin-top:7px}
.dropzone small{font-size:10px;line-height:1.7;margin-top:17px;color:#8397b5}
.upload-submit{margin-top:18px;padding:17px 20px;border-radius:14px}
.upload-submit:disabled{opacity:.58;filter:saturate(.7)}
.side-note{margin-top:15px;padding:18px 21px;border-radius:17px;border-color:rgba(226,184,102,.25);background:linear-gradient(105deg,rgba(209,160,68,.09),rgba(14,18,27,.78) 65%);transition:border-color .2s,transform .2s}
.side-note:hover{border-color:rgba(226,184,102,.43);transform:translateY(-1px)}
.spark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(236,190,102,.1);font-size:19px}
.side-note b{font-size:12px}.side-note small{font-size:11px;line-height:1.6}
@media(max-width:600px){.hero{padding:65px 0 34px}.hero h1{font-size:clamp(45px,12vw,64px);letter-spacing:-3px}.hero-copy{font-size:14px}.hero-actions{gap:9px}.button{padding:13px 14px;font-size:11px;gap:10px}.trust-line{gap:10px 15px;font-size:10px}.upload-section{padding-top:12px;padding-bottom:70px}.upload-card{padding:20px;border-radius:22px}.upload-card-head{align-items:flex-start;gap:12px}.upload-card h2{font-size:21px}.secure-pill{font-size:9px;padding:6px 8px}.dropzone{min-height:205px;padding:22px 12px}.dropzone strong{font-size:15px}.dropzone>span{font-size:11px}.dropzone small{font-size:9px}.side-note{padding:14px 15px}}
@media(prefers-reduced-motion:reduce){.button,.side-note,.dropzone,#albumTitle{transition:none}}



/* Bold homepage layout revision */
.hero{padding:76px 0 35px;max-width:900px}
.hero h1{font-size:clamp(58px,8.7vw,94px);line-height:.94;letter-spacing:-5.8px;margin:27px 0 24px}
.hero-copy{font-size:16px;max-width:510px}
.hero-actions{margin-top:32px}
.trust-line{margin-top:24px}
.upload-section{max-width:940px;padding-top:28px;padding-bottom:90px}
.upload-card{padding:clamp(24px,4.2vw,42px);border-radius:30px;display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:radial-gradient(ellipse at 0% 0%,rgba(56,103,170,.13),transparent 45%),linear-gradient(145deg,#101a2a,#0b111c 70%);box-shadow:0 30px 100px #0006,0 1px 0 #ffffff0a inset}
.upload-card-head{padding-bottom:22px;border-bottom:1px solid rgba(153,182,225,.12);margin-bottom:23px}
.upload-card h2{font-size:27px}
#albumTitle{margin-bottom:20px;height:54px}
.dropzone{min-height:245px;border-width:1px;border-style:dashed;border-color:rgba(119,169,239,.55);background:radial-gradient(ellipse at 50% 0%,rgba(53,101,167,.22),transparent 68%),#080f1a}
.upload-symbol{width:64px;height:64px;border-radius:20px}
.dropzone strong{font-size:18px}
.dropzone>span{font-size:13px}
.dropzone small{max-width:340px}
.upload-submit{margin-top:20px;min-height:54px}
.side-note{max-width:940px;margin-top:16px;padding:20px 23px;border-radius:18px;min-height:78px}
.side-note .spark{width:40px;height:40px}
.feature-section{padding-top:5px}
@media(min-width:900px){
 .hero{padding-top:83px}
 .upload-section{max-width:940px}
 .upload-card-head{align-items:center}
}
@media(max-width:600px){
 .hero{padding-top:57px}
 .hero h1{font-size:clamp(46px,12vw,65px);letter-spacing:-3.3px}
 .upload-section{padding-top:16px}
 .upload-card{padding:21px;border-radius:23px}
 .upload-card-head{padding-bottom:17px;margin-bottom:19px}
 .upload-card h2{font-size:21px}
 .dropzone{min-height:215px}
 .side-note{min-height:70px}
}


/* PngVault public landing refresh — split hero, editorial typography, polished upload flow */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.88fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  padding-top:clamp(56px,8vw,104px);
  padding-bottom:clamp(54px,7vw,88px);
  text-align:left;
}
.hero-content { position:relative; z-index:1; }
.hero .eyebrow { width:max-content; max-width:100%; margin-bottom:22px; }
.hero h1 { max-width:720px; font-size:clamp(48px,6.7vw,82px); line-height:.99; letter-spacing:-.075em; margin:0 0 22px; }
.hero h1 span {
  background:linear-gradient(100deg,#83baff 0%,#a6a2ff 52%,#d6baff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy { max-width:560px; margin:0; color:#a9b9d0; font-size:clamp(16px,1.6vw,19px); line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-actions .button { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:13px; }
.trust-line { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:27px; color:#9cafc9; font-size:12px; }
.trust-line b { color:#66b6ff; margin-right:5px; }
.hero-visual {
  position:relative; min-width:0; padding:18px; border:1px solid rgba(112,158,214,.27); border-radius:26px;
  background:linear-gradient(145deg,rgba(20,36,57,.95),rgba(8,15,26,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
  transform:rotate(.5deg);
}
.visual-topline,.visual-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#839bb9; font-size:9px; letter-spacing:.12em; font-weight:700; }
.visual-topline { padding:3px 3px 15px; }
.visual-topline i,.visual-foot i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#55d7a4; box-shadow:0 0 10px rgba(85,215,164,.35); }
.photo-mosaic { height:330px; position:relative; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr .72fr; gap:9px; }
.mosaic-photo { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:14px; min-width:0; }
.mosaic-main {
  grid-row:1/3;
  background:
    linear-gradient(180deg,transparent 50%,rgba(4,10,18,.68)),
    radial-gradient(ellipse at 62% 30%,rgba(255,218,157,.9) 0 3%,transparent 17%),
    linear-gradient(165deg,transparent 0 39%,rgba(35,83,92,.2) 40% 48%,transparent 49%),
    linear-gradient(155deg,#a8b9c6 0%,#e5b991 29%,#5e7b85 52%,#253d4b 73%,#172838 100%);
}
.mosaic-main:before { content:""; position:absolute; left:-8%; right:-5%; bottom:0; height:58%; background:linear-gradient(145deg,transparent 0 24%,#284a4c 25% 38%,#1b363f 39% 57%,#102431 58%); clip-path:polygon(0 65%,24% 20%,40% 45%,61% 0,100% 59%,100% 100%,0 100%); }
.mosaic-side-one { background:linear-gradient(180deg,rgba(5,15,25,.05),rgba(5,15,25,.35)),radial-gradient(ellipse at 50% 22%,#e8c69d 0 9%,transparent 10%),linear-gradient(145deg,#a5c3d2,#5e8e9b 45%,#203e52); }
.mosaic-side-one:after { content:""; position:absolute; left:0; right:0; bottom:0; height:54%; background:linear-gradient(110deg,#1b4650,#36716c,#163c48); clip-path:polygon(0 70%,25% 30%,50% 55%,74% 12%,100% 42%,100% 100%,0 100%); }
.mosaic-side-two { background:radial-gradient(ellipse at 70% 25%,#ffe4b7 0 4%,transparent 5%),linear-gradient(145deg,#b5c5d4,#657f98 43%,#34445b); }
.mosaic-side-two:before { content:""; position:absolute; left:0; right:0; bottom:-1px; height:45%; background:linear-gradient(145deg,#8b7c72,#4b5968,#1b2939); clip-path:polygon(0 40%,28% 5%,48% 45%,70% 20%,100% 50%,100% 100%,0 100%); }
.mosaic-bottom { grid-column:2; background:radial-gradient(ellipse at 30% 25%,#f7d6b0 0 5%,transparent 6%),linear-gradient(130deg,#9eafbd,#607c92 48%,#20384a); }
.mosaic-bottom:after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(160deg,transparent,#172d40); clip-path:polygon(0 25%,34% 0,68% 35%,100% 12%,100% 100%,0 100%); }
.photo-label { position:absolute; left:12px; top:12px; z-index:1; padding:6px 8px; border-radius:6px; color:#f3f6fa; background:rgba(6,14,23,.35); backdrop-filter:blur(8px); font-size:8px; letter-spacing:.12em; }
.mosaic-caption { position:absolute; z-index:2; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(8,16,27,.76); backdrop-filter:blur(16px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.caption-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,#8cc2ff,#4c87f6); color:#071222; font-weight:900; }
.mosaic-caption b,.mosaic-caption small { display:block; }
.mosaic-caption b { font-size:12px; }
.mosaic-caption small { margin-top:2px; color:#9cb2cf; font-size:10px; }
.caption-arrow { margin-left:auto; color:#8ebeff; }
.visual-foot { padding:15px 3px 1px; }
.upload-section { padding-bottom:30px; }
.upload-card {
  padding:clamp(22px,3.5vw,42px); border-radius:24px; border:1px solid #2b4565;
  background:radial-gradient(ellipse at 80% 0%,rgba(44,94,157,.13),transparent 40%),linear-gradient(145deg,#101a29,#0a111c);
  box-shadow:0 22px 65px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
.upload-card-head { align-items:center; padding-bottom:22px; border-bottom:1px solid rgba(143,173,211,.13); margin-bottom:22px; }
.upload-card-head h2 { font-size:clamp(22px,2.4vw,29px); letter-spacing:-.045em; margin-top:8px; }
#albumTitle { width:100%; min-height:52px; margin-top:10px; padding:0 16px; color:#f4f7fc; background:#080f1a; border:1px solid #2a3d55; border-radius:12px; outline:none; }
#albumTitle:focus { border-color:#6ba7ff; box-shadow:0 0 0 3px rgba(107,167,255,.14); }
.dropzone { min-height:230px; margin-top:18px; border-radius:17px; border:1px dashed #456d9c; background:radial-gradient(ellipse at 50% 0%,rgba(57,107,169,.13),transparent 65%),#09111d; transition:border-color .18s,background .18s,transform .18s; }
.dropzone:hover,.dropzone.dragover { border-color:#8bc2ff; background:radial-gradient(ellipse at 50% 0%,rgba(57,107,169,.2),transparent 65%),#0b1726; }
.upload-symbol { width:58px; height:58px; border-radius:17px; background:linear-gradient(145deg,#1d3d63,#122640); border:1px solid #315780; }
.upload-symbol svg { width:25px; height:25px; }
.upload-submit { min-height:52px; margin-top:18px; border-radius:13px; }
.side-note { margin-top:14px; border-radius:16px; border-color:rgba(217,171,89,.3); background:linear-gradient(100deg,rgba(49,39,24,.5),rgba(14,17,24,.8)); }
.feature-card { border-radius:20px; background:linear-gradient(145deg,#111c2b,#0b111b); border-color:rgba(117,155,204,.17); }
.feature-icon { border-radius:12px; }
.how-section { border-top:1px solid rgba(117,155,204,.12); border-bottom:1px solid rgba(117,155,204,.12); background:linear-gradient(180deg,rgba(15,25,40,.65),rgba(8,11,18,.3)); }
.faq-list details { border-radius:13px; border:1px solid rgba(117,155,204,.16); background:rgba(14,23,37,.62); }
.footer { padding-top:28px; padding-bottom:28px; }
@media(max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:55px; gap:32px; }
  .hero-visual { max-width:620px; width:100%; margin-inline:auto; }
  .hero h1 { font-size:clamp(48px,11vw,72px); }
  .photo-mosaic { height:300px; }
}
@media(max-width:520px) {
  .hero { padding-top:38px; }
  .hero h1 { font-size:clamp(42px,12vw,58px); }
  .hero-visual { padding:12px; }
  .photo-mosaic { height:255px; }
  .upload-card-head { align-items:flex-start; flex-direction:column; }
  .dropzone { min-height:195px; }
  .trust-line { gap:10px 14px; }
}


/* Upload Studio: actionable workflow and live file summary */
.upload-studio { padding:clamp(22px,3vw,38px); border-radius:24px; border:1px solid #2b4565; background:radial-gradient(ellipse at 92% 0%,rgba(55,111,185,.17),transparent 38%),linear-gradient(145deg,#111e30,#0a111d 72%); box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045); }
.upload-studio .upload-card-head { align-items:flex-start; gap:18px; margin-bottom:20px; padding-bottom:22px; border-bottom:1px solid rgba(135,170,212,.16); }
.upload-studio .upload-card-head h2 { font-size:clamp(25px,3vw,34px); letter-spacing:-.05em; margin:9px 0 8px; }
.upload-intro { max-width:620px; margin:0; color:#9fb3ce; font-size:13px; line-height:1.6; }
.upload-steps { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 23px; }
.upload-steps span { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(119,157,205,.16); border-radius:999px; background:rgba(8,16,28,.55); color:#8299b7; font-size:11px; }
.upload-steps span.active { color:#d8eaff; border-color:rgba(100,165,255,.36); background:rgba(44,105,183,.15); }
.upload-steps i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#1b3554; color:#a9d0ff; font-size:10px; font-style:normal; }
.upload-studio .field-label { display:block; font-size:13px; color:#e4edfa; }
.upload-studio .field-label span { color:#7f96b4; font-weight:400; }
.upload-studio #albumTitle { min-height:52px; margin-top:10px; padding:0 16px; border-radius:12px; background:#080f1b; border:1px solid #2c405b; color:#f3f7ff; font:inherit; }
.upload-studio .dropzone { position:relative; min-height:225px; margin-top:16px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; border-radius:17px; border:1px dashed #4775a8; background:radial-gradient(ellipse at 50% 0%,rgba(50,106,171,.15),transparent 65%),#09121f; }
.upload-studio .dropzone:after { content:""; position:absolute; inset:7px; border:1px solid rgba(115,160,213,.07); border-radius:12px; pointer-events:none; }
.upload-studio .dropzone strong { font-size:16px; }
.upload-studio .dropzone span { color:#a9bdd7; font-size:13px; }
.upload-studio .dropzone span b { color:#8dc0ff; }
.upload-studio .dropzone small { color:#8098b7; font-size:10px; text-align:center; }
.upload-studio .dropzone small em { display:block; margin-top:5px; font-style:normal; color:#6f89a9; }
.selected-summary { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 0 2px; }
.selected-summary span { padding:7px 10px; border-radius:8px; background:#12243a; color:#b9d8ff; font-size:11px; border:1px solid rgba(103,157,224,.16); }
.selected-summary .summary-hint { margin-left:auto; background:transparent; border-color:transparent; color:#7f98b7; }
.upload-studio .selected-files { margin-top:13px; padding:12px; border-radius:13px; border:1px solid rgba(116,155,204,.16); background:rgba(5,11,19,.35); }
.upload-studio .file-row { border-color:rgba(116,155,204,.12); }
.upload-studio .upload-submit { width:100%; min-height:52px; margin-top:17px; border-radius:13px; font-weight:750; }
.upload-studio .secure-pill { white-space:nowrap; }
@media(max-width:600px) {
 .upload-studio .upload-card-head { flex-direction:column; }
 .upload-steps { gap:6px; }
 .upload-steps span { font-size:10px; padding:7px 8px; }
 .selected-summary .summary-hint { margin-left:0; }
 .upload-studio .dropzone { min-height:190px; padding:18px; }
}

/* Album photos: large, readable previews like a real photo gallery */
.album-main.wrap{width:min( calc(100% - 48px), 1680px);max-width:1680px}
.album-layout{grid-template-columns:minmax(0,1fr) 330px;gap:26px}
.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:22px}
.album-photo{border-radius:19px;background:#0d1523;box-shadow:0 10px 30px #0003}
.album-photo img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#05080e}
.photo-caption{padding:12px 15px;min-height:42px;align-items:center}
.photo-caption span{font-size:12px}
.photo-caption small{font-size:11px}
.album-info-card{position:sticky;top:24px}
@media(min-width:1500px){.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-photo img{aspect-ratio:16/9}}
@media(max-width:1050px){.album-layout{grid-template-columns:1fr}.album-info-card{position:static;grid-row:auto;margin-top:10px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.album-main.wrap{width:calc(100% - 28px)}.album-grid{grid-template-columns:1fr;gap:14px}.album-photo img{aspect-ratio:16/9}.album-toolbar{align-items:flex-start;flex-direction:column}.album-toolbar>div{flex-wrap:wrap}}